<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/form-elements.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:42 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=input.html>← 4.10.5 The input element</a> — <a href=index.html>Table of Contents</a> — <a href=form-control-infrastructure.html>4.10.18 Form control infrastructure →</a></nav><ol class=toc><li id=toc-semantics><ol><li><ol><li><a href=form-elements.html#the-button-element><span class=secno>4.10.6</span> The <code>button</code> element</a><li><a href=form-elements.html#the-select-element><span class=secno>4.10.7</span> The <code>select</code> element</a><li><a href=form-elements.html#the-datalist-element><span class=secno>4.10.8</span> The <code>datalist</code> element</a><li><a href=form-elements.html#the-optgroup-element><span class=secno>4.10.9</span> The <code>optgroup</code> element</a><li><a href=form-elements.html#the-option-element><span class=secno>4.10.10</span> The <code>option</code> element</a><li><a href=form-elements.html#the-textarea-element><span class=secno>4.10.11</span> The <code>textarea</code> element</a><li><a href=form-elements.html#the-output-element><span class=secno>4.10.12</span> The <code>output</code> element</a><li><a href=form-elements.html#the-progress-element><span class=secno>4.10.13</span> The <code>progress</code> element</a><li><a href=form-elements.html#the-meter-element><span class=secno>4.10.14</span> The <code>meter</code> element</a><li><a href=form-elements.html#the-fieldset-element><span class=secno>4.10.15</span> The <code>fieldset</code> element</a><li><a href=form-elements.html#the-legend-element><span class=secno>4.10.16</span> The <code>legend</code> element</a><li><a href=form-elements.html#the-selectedcontent-element><span class=secno>4.10.17</span> The <code>selectedcontent</code> element</a></ol></ol></ol><h4 id=the-button-element><span class=secno>4.10.6</span> The <dfn data-dfn-type=element><code>button</code></dfn> element<a href=#the-button-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button title="The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.">Element/button</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>15+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>14+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement title="The HTMLButtonElement interface provides properties and methods (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating <button> elements.">HTMLButtonElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-button-element:concept-element-categories>Categories</a>:<dd><a id=the-button-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-button-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-button-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a href=forms.html#category-listed id=the-button-element:category-listed>Listed</a>, <a href=forms.html#category-label id=the-button-element:category-label>labelable</a>, <a href=forms.html#category-submit id=the-button-element:category-submit>submittable</a>, and <a href=forms.html#category-autocapitalize id=the-button-element:category-autocapitalize>autocapitalize-and-autocorrect inheriting</a> <a id=the-button-element:form-associated-element href=forms.html#form-associated-element>form-associated element</a>.<dd><a id=the-button-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-button-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-button-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dd>As the first child of a <code id=the-button-element:the-select-element><a href=#the-select-element>select</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-button-element:concept-element-content-model>Content model</a>:<dd><a id=the-button-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>, but there must be no <a id=the-button-element:interactive-content-2-2 href=dom.html#interactive-content-2>interactive content</a>
   descendant and no descendant with the <code id=the-button-element:attr-tabindex><a href=interaction.html#attr-tabindex>tabindex</a></code> attribute
   specified. If the element is the first child of a <code id=the-button-element:the-select-element-2><a href=#the-select-element>select</a></code> element, then it may also
   have zero or one descendant <code id=the-button-element:the-selectedcontent-element><a href=#the-selectedcontent-element>selectedcontent</a></code> element.<dt><a href=dom.html#concept-element-tag-omission id=the-button-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-button-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-button-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-button-element:attr-button-command><a href=#attr-button-command>command</a></code> —  Indicates to the targeted element which action to take.
     <dd><code id=the-button-element:attr-button-commandfor><a href=#attr-button-commandfor>commandfor</a></code> —  Targets another element to be invoked.
     <dd><code id=the-button-element:attr-fe-disabled><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> —  Whether the form control is disabled
     <dd><code id=the-button-element:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> —  Associates the element with a <code id=the-button-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element
     <dd><code id=the-button-element:attr-fs-formaction><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code> —  <a id=the-button-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> to use for <a id=the-button-element:form-submission-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-button-element:attr-fs-formenctype><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code> —  <a id=the-button-element:entry-list href=form-control-infrastructure.html#entry-list>Entry list</a> encoding type to use for <a id=the-button-element:form-submission-2-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-button-element:attr-fs-formmethod><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code> —  Variant to use for <a id=the-button-element:form-submission-2-3 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-button-element:attr-fs-formnovalidate><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code> —  Bypass form control validation for <a id=the-button-element:form-submission-2-4 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-button-element:attr-fs-formtarget><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code> —  <a id=the-button-element:navigable href=document-sequences.html#navigable>Navigable</a> for <a id=the-button-element:form-submission-2-5 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-button-element:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> —  Name of the element to use for <a id=the-button-element:form-submission-2-6 href=form-control-infrastructure.html#form-submission-2>form submission</a> and in the <code id=the-button-element:dom-form-elements><a href=forms.html#dom-form-elements>form.elements</a></code> API 
     <dd><code id=the-button-element:attr-popovertarget><a href=popover.html#attr-popovertarget>popovertarget</a></code> —  Targets a popover element to toggle, show, or hide
     <dd><code id=the-button-element:attr-popovertargetaction><a href=popover.html#attr-popovertargetaction>popovertargetaction</a></code> —  Indicates whether a targeted popover element is to be toggled, shown, or hidden
     <dd><code id=the-button-element:attr-button-type><a href=#attr-button-type>type</a></code> —  Type of button
     <dd><code id=the-button-element:attr-button-value><a href=#attr-button-value>value</a></code> —  Value to be used for <a id=the-button-element:form-submission-2-7 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-button-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-button>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-button>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-button-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlbuttonelement' data-dfn-type='interface'><c- g>HTMLButtonElement</c-></dfn> : <a id='the-button-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-button-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-button-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-button-element:xattr-reflectsetter'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-button-command' id='the-button-element:dom-button-command'><c- g>command</c-></a>;
  [<a id='the-button-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-button-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- n>Element</c->? <dfn data-dfn-for='HTMLButtonElement' id='dom-button-commandforelement' data-dfn-type='attribute'><c- g>commandForElement</c-></dfn>;
  [<a id='the-button-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-button-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLButtonElement' id='dom-button-disabled' data-dfn-type='attribute'><c- g>disabled</c-></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-button-element:htmlformelement' href='forms.html#htmlformelement'><c- n>HTMLFormElement</c-></a>? <a href='form-control-infrastructure.html#dom-fae-form' id='the-button-element:dom-fae-form'><c- g>form</c-></a>;
  [<a id='the-button-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-button-element:xattr-reflectsetter-2'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <a href='form-control-infrastructure.html#dom-fs-formaction' id='the-button-element:dom-fs-formaction'><c- g>formAction</c-></a>;
  [<a id='the-button-element:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-fs-formenctype' id='the-button-element:dom-fs-formenctype'><c- g>formEnctype</c-></a>;
  [<a id='the-button-element:cereactions-6' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-fs-formmethod' id='the-button-element:dom-fs-formmethod'><c- g>formMethod</c-></a>;
  [<a id='the-button-element:cereactions-7' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-button-element:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLButtonElement' id='dom-button-formnovalidate' data-dfn-type='attribute'><c- g>formNoValidate</c-></dfn>;
  [<a id='the-button-element:cereactions-8' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-button-element:xattr-reflect-4'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLButtonElement' id='dom-button-formtarget' data-dfn-type='attribute'><c- g>formTarget</c-></dfn>;
  [<a id='the-button-element:cereactions-9' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-button-element:xattr-reflect-5'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLButtonElement' id='dom-button-name' data-dfn-type='attribute'><c- g>name</c-></dfn>;
  [<a id='the-button-element:cereactions-10' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-button-element:xattr-reflectsetter-3'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-button-type' id='the-button-element:dom-button-type'><c- g>type</c-></a>;
  [<a id='the-button-element:cereactions-11' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-button-element:xattr-reflect-6'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLButtonElement' id='dom-button-value' data-dfn-type='attribute'><c- g>value</c-></dfn>;

  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-willvalidate' id='the-button-element:dom-cva-willvalidate'><c- g>willValidate</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-button-element:validitystate' href='form-control-infrastructure.html#validitystate'><c- n>ValidityState</c-></a> <a href='form-control-infrastructure.html#dom-cva-validity' id='the-button-element:dom-cva-validity'><c- g>validity</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-cva-validationmessage' id='the-button-element:dom-cva-validationmessage'><c- g>validationMessage</c-></a>;
  <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-checkvalidity' id='the-button-element:dom-cva-checkvalidity'><c- g>checkValidity</c-></a>();
  <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-reportvalidity' id='the-button-element:dom-cva-reportvalidity'><c- g>reportValidity</c-></a>();
  <c- b>undefined</c-> <a href='form-control-infrastructure.html#dom-cva-setcustomvalidity' id='the-button-element:dom-cva-setcustomvalidity'><c- g>setCustomValidity</c-></a>(<c- b>DOMString</c-> <c- g>error</c->);

  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-button-element:nodelist' href='https://dom.spec.whatwg.org/#interface-nodelist' data-x-internal='nodelist'><c- n>NodeList</c-></a> <a href='forms.html#dom-lfe-labels' id='the-button-element:dom-lfe-labels'><c- g>labels</c-></a>;
};
<a href='#htmlbuttonelement' id='the-button-element:htmlbuttonelement'><c- n>HTMLButtonElement</c-></a> <c- b>includes</c-> <a id='the-button-element:popovertargetattributes' href='popover.html#popovertargetattributes'><c- n>PopoverTargetAttributes</c-></a>;</code></pre>
   </dl>

  <p>The <code id=the-button-element:the-button-element><a href=#the-button-element>button</a></code> element <a id=the-button-element:represents href=dom.html#represents>represents</a> a button labeled by its contents.</p>

  <p>The element is a <a href=forms.html#concept-button id=the-button-element:concept-button>button</a>.</p>

  <p>The <dfn data-dfn-for=button id=attr-button-type data-dfn-type=element-attr><code>type</code></dfn> attribute
  controls the behavior of the button when it is activated. It is an <a id=the-button-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated
  attribute</a> with the following keywords and states:</p>

  <table><thead><tr><th> Keyword
     <th> State
     <th> Brief description
   <tbody><tr><td><dfn data-dfn-for=button/type id=attr-button-type-submit data-dfn-type=attr-value><code>submit</code></dfn>
     <td><dfn id=attr-button-type-submit-state>Submit Button</dfn>
     <td>Submits the form.
    <tr><td><dfn data-dfn-for=button/type id=attr-button-type-reset data-dfn-type=attr-value><code>reset</code></dfn>
     <td><dfn id=attr-button-type-reset-state>Reset Button</dfn>
     <td>Resets the form.
    <tr><td><dfn data-dfn-for=button/type id=attr-button-type-button data-dfn-type=attr-value><code>button</code></dfn>
     <td><dfn id=attr-button-type-button-state>Button</dfn>
     <td>Does nothing.
  </table>

  <p>The attribute's <i id=the-button-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-button-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <dfn id=attr-button-type-auto-state>Auto</dfn> state.</p>

  <p>A <code id=the-button-element:the-button-element-2><a href=#the-button-element>button</a></code> element is said to be a <a href=forms.html#concept-submit-button id=the-button-element:concept-submit-button>submit button</a> if any of the following are true:</p>

  <ul><li><p>the <code id=the-button-element:attr-button-type-2><a href=#attr-button-type>type</a></code> attribute is in the <a href=#attr-button-type-auto-state id=the-button-element:attr-button-type-auto-state>Auto</a> state, both the <code id=the-button-element:attr-button-command-2><a href=#attr-button-command>command</a></code> and <code id=the-button-element:attr-button-commandfor-2><a href=#attr-button-commandfor>commandfor</a></code> content attributes are not present, and the
   <a id=the-button-element:parent href=https://dom.spec.whatwg.org/#concept-tree-parent data-x-internal=parent>parent</a> node is not a <code id=the-button-element:the-select-element-3><a href=#the-select-element>select</a></code> element;
   or<li><p>the <code id=the-button-element:attr-button-type-3><a href=#attr-button-type>type</a></code> attribute is in the <a href=#attr-button-type-submit-state id=the-button-element:attr-button-type-submit-state>Submit Button</a> state.</ul>

  <p><strong>Constraint validation</strong>: If the element is not a <a href=forms.html#concept-submit-button id=the-button-element:concept-submit-button-2>submit button</a>, the element is <a id=the-button-element:barred-from-constraint-validation href=form-control-infrastructure.html#barred-from-constraint-validation>barred from constraint
  validation</a>.</p>

  <p>If specified, the <dfn data-dfn-for=button id=attr-button-commandfor data-dfn-type=element-attr><code>commandfor</code></dfn> attribute value must be the <a href=https://dom.spec.whatwg.org/#concept-id id=the-button-element:concept-id data-x-internal=concept-id>ID</a> of an element in the same <a id=the-button-element:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a> as the <a href=forms.html#concept-button id=the-button-element:concept-button-2>button</a> with the <code id=the-button-element:attr-button-commandfor-3><a href=#attr-button-commandfor>commandfor</a></code> attribute.</p>

  <p>The <dfn data-dfn-for=button id=attr-button-command data-dfn-type=element-attr><code>command</code></dfn>
  attribute is an <a id=the-button-element:enumerated-attribute-2 href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=html-global/command id=attr-button-command-toggle-popover data-dfn-type=attr-value><code>toggle-popover</code></dfn>
     <td><dfn id=attr-button-command-toggle-popover-state>Toggle Popover</dfn>
     <td>Shows or hides the targeted <code id=the-button-element:attr-popover><a href=popover.html#attr-popover>popover</a></code> element.
    <tr><td><dfn data-dfn-for=html-global/command id=attr-button-command-show-popover data-dfn-type=attr-value><code>show-popover</code></dfn>
     <td><dfn id=attr-button-command-show-popover-state>Show Popover</dfn>
     <td>Shows the targeted <code id=the-button-element:attr-popover-2><a href=popover.html#attr-popover>popover</a></code> element.
    <tr><td><dfn data-dfn-for=html-global/command id=attr-button-command-hide-popover data-dfn-type=attr-value><code>hide-popover</code></dfn>
     <td><dfn id=attr-button-command-hide-popover-state>Hide Popover</dfn>
     <td>Hides the targeted <code id=the-button-element:attr-popover-3><a href=popover.html#attr-popover>popover</a></code> element.
    <tr><td><dfn data-dfn-for=html-global/command id=attr-button-command-close data-dfn-type=attr-value><code>close</code></dfn>
     <td><dfn id=attr-button-command-close-state>Close</dfn>
     <td>Closes the targeted <code id=the-button-element:the-dialog-element><a href=interactive-elements.html#the-dialog-element>dialog</a></code> element.
    <tr><td><dfn data-dfn-for=html-global/command id=attr-button-command-request-close data-dfn-type=attr-value><code>request-close</code></dfn>
     <td><dfn id=attr-button-command-request-close-state>Request Close</dfn>
     <td>Requests to close the targeted <code id=the-button-element:the-dialog-element-2><a href=interactive-elements.html#the-dialog-element>dialog</a></code> element.
    <tr><td><dfn data-dfn-for=html-global/command id=attr-button-command-show-modal data-dfn-type=attr-value><code>show-modal</code></dfn>
     <td><dfn id=attr-button-command-show-modal-state>Show Modal</dfn>
     <td>Opens the targeted <code id=the-button-element:the-dialog-element-3><a href=interactive-elements.html#the-dialog-element>dialog</a></code> element as modal.
    <tr><td>A <a href=#attr-button-command-custom id=the-button-element:attr-button-command-custom>custom command keyword</a>
     <td><dfn id=attr-button-command-custom-state>Custom</dfn>
     <td>Only dispatches the <code id=the-button-element:event-command><a href=indices.html#event-command>command</a></code> event on the targeted
     element.
  </table>

  <p>The attribute's <i id=the-button-element:missing-value-default-2><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-button-element:invalid-value-default-2><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <dfn id=attr-button-command-unknown-state>Unknown</dfn> state.</p>

  <p>A <dfn id=attr-button-command-custom>custom command keyword</dfn> is a string that
  <a id=the-button-element:starts-with href=https://infra.spec.whatwg.org/#string-starts-with data-x-internal=starts-with>starts with</a> "<code>--</code>".</p>

  <p>If a <code id=the-button-element:the-button-element-3><a href=#the-button-element>button</a></code> element is the first <a href=https://dom.spec.whatwg.org/#concept-tree-child id=the-button-element:concept-tree-child data-x-internal=concept-tree-child>child</a>
  which is an <a id=the-button-element:element href=https://dom.spec.whatwg.org/#interface-element data-x-internal=element>element</a> of a <code id=the-button-element:the-select-element-4><a href=#the-select-element>select</a></code> element, then it is
  <a id=the-button-element:inert href=interaction.html#inert>inert</a>.</p>

  

  <p>A <code id=the-button-element:the-button-element-4><a href=#the-button-element>button</a></code> element <var>element</var>'s <a id=the-button-element:activation-behaviour href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation behavior</a> given
  <var>event</var> is:</p>

  <ol><li><p>If <var>element</var> is <a href=form-control-infrastructure.html#concept-fe-disabled id=the-button-element:concept-fe-disabled>disabled</a>, then
   return.<li><p>If <var>element</var>'s <a id=the-button-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is not <a id=the-button-element:fully-active href=document-sequences.html#fully-active>fully active</a>, then
   return.<li>
    <p>If <var>element</var> has a <a id=the-button-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>:</p>

    <ol><li><p>If <var>element</var> is a <a href=forms.html#concept-submit-button id=the-button-element:concept-submit-button-3>submit button</a>,
     then <a href=form-control-infrastructure.html#concept-form-submit id=the-button-element:concept-form-submit>submit</a> <var>element</var>'s
     <a id=the-button-element:form-owner-2 href=form-control-infrastructure.html#form-owner>form owner</a> from <var>element</var> with <i id=the-button-element:submit-user-involvement><a href=form-control-infrastructure.html#submit-user-involvement>userInvolvement</a></i> set to <var>event</var>'s <a href=browsing-the-web.html#event-uni id=the-button-element:event-uni>user navigation involvement</a>, and return.<li><p>If <var>element</var>'s <code id=the-button-element:attr-button-type-4><a href=#attr-button-type>type</a></code> attribute is in the
     <a href=#attr-button-type-reset-state id=the-button-element:attr-button-type-reset-state>Reset Button</a> state, then <a href=form-control-infrastructure.html#concept-form-reset id=the-button-element:concept-form-reset>reset</a> <var>element</var>'s <a id=the-button-element:form-owner-3 href=form-control-infrastructure.html#form-owner>form owner</a>, and
     return.<li><p>If <var>element</var>'s <code id=the-button-element:attr-button-type-5><a href=#attr-button-type>type</a></code> attribute is in the
     <a href=#attr-button-type-auto-state id=the-button-element:attr-button-type-auto-state-2>Auto</a> state, then return.</ol>
   <li><p>Let <var>target</var> be the result of running <var>element</var>'s <a href=common-dom-interfaces.html#attr-associated-element id=the-button-element:attr-associated-element>get the <code>commandfor</code>-associated
   element</a>.<li>
    <p>If <var>target</var> is not null:</p>

    <ol><li><p>Let <var>command</var> be <var>element</var>'s <code id=the-button-element:attr-button-command-3><a href=#attr-button-command>command</a></code> attribute.<li><p>If <var>command</var> is in the <a href=#attr-button-command-unknown-state id=the-button-element:attr-button-command-unknown-state>Unknown</a> state, then return.<li><p>Let <var>isPopover</var> be true if <var>target</var>'s <code id=the-button-element:attr-popover-4><a href=popover.html#attr-popover>popover</a></code> attribute is not in the <a href=popover.html#attr-popover-none-state id=the-button-element:attr-popover-none-state>No Popover</a> state; otherwise false.<li>
      <p>If <var>isPopover</var> is false and <var>command</var> is not in the <a href=#attr-button-command-custom-state id=the-button-element:attr-button-command-custom-state>Custom</a> state:</p>

      <ol><li><p><a id=the-button-element:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>target</var>'s <a href=https://dom.spec.whatwg.org/#concept-element-namespace id=the-button-element:concept-element-namespace data-x-internal=concept-element-namespace>namespace</a> is the
       <a id=the-button-element:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML namespace</a>.<li><p>If this standard does not define <a href=#is-valid-command-steps id=the-button-element:is-valid-command-steps>is valid command steps</a> for
       <var>target</var>'s <a href=https://dom.spec.whatwg.org/#concept-element-local-name id=the-button-element:concept-element-local-name data-x-internal=concept-element-local-name>local name</a>, then
       return.<li><p>Otherwise, if the result of running <var>target</var>'s corresponding <a href=#is-valid-command-steps id=the-button-element:is-valid-command-steps-2>is valid
       command steps</a> given <var>command</var> is false, then
       return.</ol>
     <li>
      <p>Let <var>continue</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-button-element:concept-event-fire data-x-internal=concept-event-fire>firing an
      event</a> named <code id=the-button-element:event-command-2><a href=indices.html#event-command>command</a></code> at <var>target</var>, using
      <code id=the-button-element:commandevent><a href=interaction.html#commandevent>CommandEvent</a></code>, with its <code id=the-button-element:dom-commandevent-command><a href=interaction.html#dom-commandevent-command>command</a></code>
      attribute initialized to <var>command</var>, its <code id=the-button-element:dom-commandevent-source><a href=interaction.html#dom-commandevent-source>source</a></code> attribute initialized to <var>element</var>,
      and its <code id=the-button-element:dom-event-cancelable><a data-x-internal=dom-event-cancelable href=https://dom.spec.whatwg.org/#dom-event-cancelable>cancelable</a></code> attribute initialized to
      true.</p>

      <p class=XXX><a href=https://github.com/whatwg/dom/issues/1328>DOM standard issue
      #1328</a> tracks how to better standardize associated event data in a way which makes sense on
      Events. Currently an event attribute initialized to a value cannot also have a getter, and so
      an internal slot (or map of additional fields) is required to properly specify this.</p>
     <li><p>If <var>continue</var> is false, then return.<li><p>If <var>target</var> is not <a id=the-button-element:connected href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>, then return.<li><p>If <var>command</var> is in the <a href=#attr-button-command-custom-state id=the-button-element:attr-button-command-custom-state-2>Custom</a> state, then return.<li>
      <p>If <var>command</var> is in the <a href=#attr-button-command-hide-popover-state id=the-button-element:attr-button-command-hide-popover-state>Hide Popover</a> state:</p>

      <ol><li><p>If the result of running <a id=the-button-element:check-popover-validity href=popover.html#check-popover-validity>check popover validity</a> given
       <var>target</var>, true, false, and null is true, then run the
       <a id=the-button-element:hide-popover-algorithm href=popover.html#hide-popover-algorithm>hide popover algorithm</a> given <var>target</var>, true, true, false, and
       <var>element</var>.</ol>
     <li>
      <p>Otherwise, if <var>command</var> is in the <a href=#attr-button-command-toggle-popover-state id=the-button-element:attr-button-command-toggle-popover-state>Toggle Popover</a> state:</p>

      <ol><li><p>If the result of running <a id=the-button-element:check-popover-validity-2 href=popover.html#check-popover-validity>check popover validity</a> given
       <var>target</var>, false, false, and null is true, then run the
       <a href=popover.html#show-popover id=the-button-element:show-popover>show popover algorithm</a> given <var>target</var>, false, and
       <a id=the-button-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.<li><p>Otherwise, if the result of running <a id=the-button-element:check-popover-validity-3 href=popover.html#check-popover-validity>check popover validity</a> given
       <var>target</var>, true, false, and null is true, then run the
       <a id=the-button-element:hide-popover-algorithm-2 href=popover.html#hide-popover-algorithm>hide popover algorithm</a> given <var>target</var>, true,
       true, false, and <var>element</var>.</ol>
     <li>
      <p>Otherwise, if <var>command</var> is in the <a href=#attr-button-command-show-popover-state id=the-button-element:attr-button-command-show-popover-state>Show Popover</a> state:</p>

      <ol><li><p>If the result of running <a id=the-button-element:check-popover-validity-4 href=popover.html#check-popover-validity>check popover validity</a> given <var>target</var>,
       false, false, and null is true, then run the <a href=popover.html#show-popover id=the-button-element:show-popover-2>show popover algorithm</a> given <var>target</var>, false, and
       <a id=the-button-element:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.</ol>
     <li><p>Otherwise, if this standard defines <a href=#command-steps id=the-button-element:command-steps>command steps</a> for
     <var>target</var>'s <a href=https://dom.spec.whatwg.org/#concept-element-local-name id=the-button-element:concept-element-local-name-2 data-x-internal=concept-element-local-name>local name</a>, then run the
     corresponding <a href=#command-steps id=the-button-element:command-steps-2>command steps</a> given <var>target</var>, <var>element</var>,
     and <var>command</var>.</ol>
   <li><p>Otherwise, run the <a id=the-button-element:popover-target-attribute-activation-behavior href=popover.html#popover-target-attribute-activation-behavior>popover target attribute activation behavior</a> given
   <var>element</var> and <var>event</var>'s <a href=https://dom.spec.whatwg.org/#concept-event-target id=the-button-element:concept-event-target data-x-internal=concept-event-target>target</a>.</ol>

  <p>An <a href=infrastructure.html#html-elements id=the-button-element:html-elements>HTML element</a> can have specific
  <dfn id=is-valid-command-steps>is valid command steps</dfn> and <dfn id=command-steps>command steps</dfn> defined for the
  element's <a href=https://dom.spec.whatwg.org/#concept-element-local-name id=the-button-element:concept-element-local-name-3 data-x-internal=concept-element-local-name>local name</a>.</p>

  

  <p>The <code id=the-button-element:attr-fae-form-2><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> attribute is used to explicitly associate the
  <code id=the-button-element:the-button-element-5><a href=#the-button-element>button</a></code> element with its <a id=the-button-element:form-owner-4 href=form-control-infrastructure.html#form-owner>form owner</a>. The <code id=the-button-element:attr-fe-name-2><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute represents the element's name. The <code id=the-button-element:attr-fe-disabled-2><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> attribute is used to make the control non-interactive and
  to prevent its value from being submitted. The <code id=the-button-element:attr-fs-formaction-2><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>,
  <code id=the-button-element:attr-fs-formenctype-2><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>, <code id=the-button-element:attr-fs-formmethod-2><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>, <code id=the-button-element:attr-fs-formnovalidate-2><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>, and <code id=the-button-element:attr-fs-formtarget-2><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code> attributes are <a id=the-button-element:attributes-for-form-submission href=form-control-infrastructure.html#attributes-for-form-submission>attributes for form
  submission</a>.</p>

  <p class=note>The <code id=the-button-element:attr-fs-formnovalidate-3><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code> attribute can be
  used to make submit buttons that do not trigger the constraint validation.</p>

  <p>The <code id=the-button-element:attr-fs-formaction-3><a href=form-control-infrastructure.html#attr-fs-formaction>formaction</a></code>, <code id=the-button-element:attr-fs-formenctype-3><a href=form-control-infrastructure.html#attr-fs-formenctype>formenctype</a></code>, <code id=the-button-element:attr-fs-formmethod-3><a href=form-control-infrastructure.html#attr-fs-formmethod>formmethod</a></code>, <code id=the-button-element:attr-fs-formnovalidate-4><a href=form-control-infrastructure.html#attr-fs-formnovalidate>formnovalidate</a></code>, and <code id=the-button-element:attr-fs-formtarget-3><a href=form-control-infrastructure.html#attr-fs-formtarget>formtarget</a></code> must not be specified if the element is not
  a <a href=forms.html#concept-submit-button id=the-button-element:concept-submit-button-4>submit button</a>.</p>

  <p>The <dfn data-dfn-for=HTMLButtonElement id=dom-button-command data-dfn-type=attribute><code>command</code></dfn> getter steps are:</p>

  <ol><li><p>Let <var>command</var> be <a id=the-button-element:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <code id=the-button-element:attr-button-command-4><a href=#attr-button-command>command</a></code> attribute.<li><p>If <var>command</var> is in the <a href=#attr-button-command-custom-state id=the-button-element:attr-button-command-custom-state-3>Custom</a> state, then return <var>command</var>'s
   value.<li><p>If <var>command</var> is in the <a href=#attr-button-command-unknown-state id=the-button-element:attr-button-command-unknown-state-2>Unknown</a> state, then return the empty
   string.<li><p>Return the keyword corresponding to the value of <var>command</var>.</ol>

  <p>The <dfn data-dfn-for=button id=attr-button-value data-dfn-type=element-attr><code>value</code></dfn>
  attribute gives the element's value for the purposes of form submission. The element's <a href=form-control-infrastructure.html#concept-fe-value id=the-button-element:concept-fe-value>value</a> is the value of the element's <code id=the-button-element:attr-button-value-2><a href=#attr-button-value>value</a></code> attribute, if there is one; otherwise the empty string.
  The element's <a href=form-control-infrastructure.html#concept-fe-optional-value id=the-button-element:concept-fe-optional-value>optional value</a> is the value of the
  element's <code id=the-button-element:attr-button-value-3><a href=#attr-button-value>value</a></code> attribute, if there is one; otherwise
  null.</p>

  <p class=note>A button (and its value) is only included in the form submission if the button
  itself was used to initiate the form submission.</p>

  <hr>

  

  <p>The <dfn data-dfn-for=HTMLButtonElement id=dom-button-type data-dfn-type=attribute><code>type</code></dfn>
  getter steps are:</p>

  <ol><li><p>If <var>this</var> is a <a href=forms.html#concept-submit-button id=the-button-element:concept-submit-button-5>submit button</a>, then
   return "<code>submit</code>".<li><p>Let <var>state</var> be <a id=the-button-element:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <code id=the-button-element:attr-button-type-6><a href=#attr-button-type>type</a></code>
   attribute.<li><p><a id=the-button-element:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>state</var> is not in the <a href=#attr-button-type-submit-state id=the-button-element:attr-button-type-submit-state-2>Submit Button</a> state.<li><p>If <var>state</var> is in the <a href=#attr-button-type-auto-state id=the-button-element:attr-button-type-auto-state-3>Auto</a>
   state, then return "<code>button</code>".<li><p>Return the keyword value corresponding to <var>state</var>.</ol>

  <p>The <code id=the-button-element:dom-cva-willvalidate-2><a href=form-control-infrastructure.html#dom-cva-willvalidate>willValidate</a></code>, <code id=the-button-element:dom-cva-validity-2><a href=form-control-infrastructure.html#dom-cva-validity>validity</a></code>, and <code id=the-button-element:dom-cva-validationmessage-2><a href=form-control-infrastructure.html#dom-cva-validationmessage>validationMessage</a></code> IDL attributes, and the <code id=the-button-element:dom-cva-checkvalidity-2><a href=form-control-infrastructure.html#dom-cva-checkvalidity>checkValidity()</a></code>, <code id=the-button-element:dom-cva-reportvalidity-2><a href=form-control-infrastructure.html#dom-cva-reportvalidity>reportValidity()</a></code>, and <code id=the-button-element:dom-cva-setcustomvalidity-2><a href=form-control-infrastructure.html#dom-cva-setcustomvalidity>setCustomValidity()</a></code> methods, are part of the
  <a id=the-button-element:the-constraint-validation-api href=form-control-infrastructure.html#the-constraint-validation-api>constraint validation API</a>. The <code id=the-button-element:dom-lfe-labels-2><a href=forms.html#dom-lfe-labels>labels</a></code> IDL
  attribute provides a list of the element's <code id=the-button-element:the-label-element><a href=forms.html#the-label-element>label</a></code>s. The <code id=the-button-element:dom-button-disabled><a href=#dom-button-disabled>disabled</a></code>, <code id=the-button-element:dom-fae-form-2><a href=form-control-infrastructure.html#dom-fae-form>form</a></code>, and <code id=the-button-element:dom-button-name><a href=#dom-button-name>name</a></code> IDL attributes are part of the element's forms API.</p>

  

  <div class=example>

   <p>The following button is labeled "Show hint" and pops up a dialog box when activated:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>button</c->
        <c- e>onclick</c-><c- o>=</c-><c- s>&quot;alert(&apos;This 15-20 minute piece was composed by George Gershwin.&apos;)&quot;</c-><c- p>&gt;</c->
 Show hint
<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>
   <p>The following shows how <a href=forms.html#concept-button id=the-button-element:concept-button-3>buttons</a> can use <code id=the-button-element:attr-button-commandfor-4><a href=#attr-button-commandfor>commandfor</a></code> to show and hide an element with
   the <code id=the-button-element:attr-popover-5><a href=popover.html#attr-popover>popover</a></code> attribute when activated:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>button</c->
        <c- e>commandfor</c-><c- o>=</c-><c- s>&quot;the-popover&quot;</c->
        <c- e>command</c-><c- o>=</c-><c- s>&quot;show-popover&quot;</c-><c- p>&gt;</c->
 Show menu
<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>popover</c->
     <c- e>id</c-><c- o>=</c-><c- s>&quot;the-popover&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>button</c-> <c- e>commandfor</c-><c- o>=</c-><c- s>&quot;the-popover&quot;</c->
         <c- e>command</c-><c- o>=</c-><c- s>&quot;hide-popover&quot;</c-><c- p>&gt;</c->
  Hide menu
 <c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c->
    </code></pre>
  </div>

  <div class=example>
   <p>The following shows how buttons can use <code id=the-button-element:attr-button-commandfor-5><a href=#attr-button-commandfor>commandfor</a></code> with a <a href=#attr-button-command-custom id=the-button-element:attr-button-command-custom-2>custom command keyword</a> on an element, demonstrating
   how one could use custom commands for unspecified behavior:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>button</c->
        <c- e>commandfor</c-><c- o>=</c-><c- s>&quot;the-image&quot;</c->
        <c- e>command</c-><c- o>=</c-><c- s>&quot;--rotate-landscape&quot;</c-><c- p>&gt;</c->
 Rotate Left
<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>button</c-> <c- e>type</c-><c- o>=</c-><c- s>button</c->
        <c- e>commandfor</c-><c- o>=</c-><c- s>&quot;the-image&quot;</c->
        <c- e>command</c-><c- o>=</c-><c- s>&quot;--rotate-portrait&quot;</c-><c- p>&gt;</c->
 Rotate Right
<c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>img</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;the-image&quot;</c->
     <c- e>src</c-><c- o>=</c-><c- s>&quot;photo.jpg&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>const</c-> image <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- u>&quot;the-image&quot;</c-><c- p>);</c->
  image<c- p>.</c->addEventListener<c- p>(</c-><c- u>&quot;command&quot;</c-><c- p>,</c-> <c- p>(</c->event<c- p>)</c-> <c- p>=&gt;</c-> <c- p>{</c->
   <c- k>if</c-> <c- p>(</c-> event<c- p>.</c->command <c- o>==</c-> <c- u>&quot;--rotate-landscape&quot;</c-> <c- p>)</c-> <c- p>{</c->
    event<c- p>.</c->target<c- p>.</c->style<c- p>.</c->rotate <c- o>=</c-> <c- u>&quot;-90deg&quot;</c->
   <c- p>}</c-> <c- k>else</c-> <c- k>if</c-> <c- p>(</c-> event<c- p>.</c->command <c- o>==</c-> <c- u>&quot;--rotate-portrait&quot;</c-> <c- p>)</c-> <c- p>{</c->
    event<c- p>.</c->target<c- p>.</c->style<c- p>.</c->rotate <c- o>=</c-> <c- u>&quot;0deg&quot;</c->
   <c- p>}</c->
  <c- p>});</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
    </code></pre>
  </div>

  <h4 id=the-select-element><span class=secno>4.10.7</span> The <dfn data-dfn-type=element><code>select</code></dfn> element<a href=#the-select-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select title="The <select> HTML element represents a control that provides a menu of options.">Element/select</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>2+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement title="The HTMLSelectElement interface represents a <select> HTML Element. These elements also share all of the properties and methods of other HTML elements via the HTMLElement interface.">HTMLSelectElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>2+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>1+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-select-element:concept-element-categories>Categories</a>:<dd><a id=the-select-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-select-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-select-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a href=forms.html#category-listed id=the-select-element:category-listed>Listed</a>, <a href=forms.html#category-label id=the-select-element:category-label>labelable</a>, <a href=forms.html#category-submit id=the-select-element:category-submit>submittable</a>, <a href=forms.html#category-reset id=the-select-element:category-reset>resettable</a>, and <a href=forms.html#category-autocapitalize id=the-select-element:category-autocapitalize>autocapitalize-and-autocorrect inheriting</a> <a id=the-select-element:form-associated-element href=forms.html#form-associated-element>form-associated element</a>.<dd><a id=the-select-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-select-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-select-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-select-element:concept-element-content-model>Content model</a>:<dd>Zero or one <code id=the-select-element:the-button-element><a href=#the-button-element>button</a></code> elements if the <code id=the-select-element:the-select-element><a href=#the-select-element>select</a></code> is a <a id=the-select-element:drop-down-box href=rendering.html#drop-down-box>drop-down
   box</a>, followed by zero or more <a id=the-select-element:select-element-inner-content-elements-2 href=dom.html#select-element-inner-content-elements-2><code>select</code> element inner content
   elements</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-select-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-select-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-select-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-select-element:attr-fe-autocomplete><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> —  Hint for form autofill feature
     <dd><code id=the-select-element:attr-fe-disabled><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> —  Whether the form control is disabled
     <dd><code id=the-select-element:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> —  Associates the element with a <code id=the-select-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element
     <dd><code id=the-select-element:attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> —  Whether to allow multiple values
     <dd><code id=the-select-element:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> —  Name of the element to use for <a id=the-select-element:form-submission-2 href=form-control-infrastructure.html#form-submission-2>form submission</a> and in the <code id=the-select-element:dom-form-elements><a href=forms.html#dom-form-elements>form.elements</a></code> API 
     <dd><code id=the-select-element:attr-select-required><a href=#attr-select-required>required</a></code> —  Whether the control is required for <a id=the-select-element:form-submission-2-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-select-element:attr-select-size><a href=#attr-select-size>size</a></code> —  Size of the control
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-select-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd>If the element has a <code id=the-select-element:attr-select-multiple-2><a href=#attr-select-multiple>multiple</a></code> attribute or a <code id=the-select-element:attr-select-size-2><a href=#attr-select-size>size</a></code> attribute with a value > 1: <a href=https://w3c.github.io/html-aria/#el-select-multiple-or-size-greater-1>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-select-listbox>for implementers</a>.<dd>Otherwise: <a href=https://w3c.github.io/html-aria/#el-select>for authors</a>; <a href=https://w3c.github.io/html-aam/#el-select-combobox>for implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-select-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlselectelement' data-dfn-type='interface'><c- g>HTMLSelectElement</c-></dfn> : <a id='the-select-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-select-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-select-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-select-element:xattr-reflectsetter'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-fe-autocomplete' id='the-select-element:dom-fe-autocomplete'><c- g>autocomplete</c-></a>;
  [<a id='the-select-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-select-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLSelectElement' id='dom-select-disabled' data-dfn-type='attribute'><c- g>disabled</c-></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-select-element:htmlformelement' href='forms.html#htmlformelement'><c- n>HTMLFormElement</c-></a>? <a href='form-control-infrastructure.html#dom-fae-form' id='the-select-element:dom-fae-form'><c- g>form</c-></a>;
  [<a id='the-select-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-select-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLSelectElement' id='dom-select-multiple' data-dfn-type='attribute'><c- g>multiple</c-></dfn>;
  [<a id='the-select-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-select-element:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLSelectElement' id='dom-select-name' data-dfn-type='attribute'><c- g>name</c-></dfn>;
  [<a id='the-select-element:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-select-element:xattr-reflect-4'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLSelectElement' id='dom-select-required' data-dfn-type='attribute'><c- g>required</c-></dfn>;
  [<a id='the-select-element:cereactions-6' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-select-element:xattr-reflect-5'><c- g>Reflect</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectdefault' id='the-select-element:xattr-reflectdefault'>ReflectDefault=0</a>] <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <dfn data-dfn-for='HTMLSelectElement' id='dom-select-size' data-dfn-type='attribute'><c- g>size</c-></dfn>;
  

  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-select-type' id='the-select-element:dom-select-type'><c- g>type</c-></a>;

  [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-select-element:htmloptionscollection' href='common-dom-interfaces.html#htmloptionscollection'><c- n>HTMLOptionsCollection</c-></a> <a href='#dom-select-options' id='the-select-element:dom-select-options'><c- g>options</c-></a>;
  [<a id='the-select-element:cereactions-7' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-select-length' id='the-select-element:dom-select-length'><c- g>length</c-></a>;
  <c- b>getter</c-> <a href='#htmloptionelement' id='the-select-element:htmloptionelement'><c- n>HTMLOptionElement</c-></a>? <a href='#dom-select-item' id='the-select-element:dom-select-item'><c- g>item</c-></a>(<c- b>unsigned</c-> <c- b>long</c-> <c- g>index</c->);
  <a href='#htmloptionelement' id='the-select-element:htmloptionelement-2'><c- n>HTMLOptionElement</c-></a>? <a href='#dom-select-nameditem' id='the-select-element:dom-select-nameditem'><c- g>namedItem</c-></a>(<c- b>DOMString</c-> <c- g>name</c->);
  [<a id='the-select-element:cereactions-8' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>undefined</c-> <a href='#dom-select-add' id='the-select-element:dom-select-add'><c- g>add</c-></a>((<a href='#htmloptionelement' id='the-select-element:htmloptionelement-3'><c- n>HTMLOptionElement</c-></a> <c- b>or</c-> <a href='#htmloptgroupelement' id='the-select-element:htmloptgroupelement'><c- n>HTMLOptGroupElement</c-></a>) <c- g>element</c->, <c- b>optional</c-> (<a id='the-select-element:htmlelement-2' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> <c- b>or</c-> <c- b>long</c->)? <c- g>before</c-> = <c- b>null</c->);
  [<a id='the-select-element:cereactions-9' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>undefined</c-> <a href='#dom-select-remove' id='the-select-element:dom-select-remove'><c- g>remove</c-></a>(); // ChildNode overload
  [<a id='the-select-element:cereactions-10' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>undefined</c-> <a href='#dom-select-remove' id='the-select-element:dom-select-remove-2'><c- g>remove</c-></a>(<c- b>long</c-> <c- g>index</c->);
  [<a id='the-select-element:cereactions-11' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <a href='#dom-select-setter'><c- b>setter</c-></a> <c- b>undefined</c-> (<c- b>unsigned</c-> <c- b>long</c-> <c- g>index</c->, <a href='#htmloptionelement' id='the-select-element:htmloptionelement-4'><c- n>HTMLOptionElement</c-></a>? <c- g>option</c->);

  [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-select-element:htmlcollection' href='https://dom.spec.whatwg.org/#interface-htmlcollection' data-x-internal='htmlcollection'><c- n>HTMLCollection</c-></a> <a href='#dom-select-selectedoptions' id='the-select-element:dom-select-selectedoptions'><c- g>selectedOptions</c-></a>;
  <c- b>attribute</c-> <c- b>long</c-> <a href='#dom-select-selectedindex' id='the-select-element:dom-select-selectedindex'><c- g>selectedIndex</c-></a>;
  <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-select-value' id='the-select-element:dom-select-value'><c- g>value</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-willvalidate' id='the-select-element:dom-cva-willvalidate'><c- g>willValidate</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-select-element:validitystate' href='form-control-infrastructure.html#validitystate'><c- n>ValidityState</c-></a> <a href='form-control-infrastructure.html#dom-cva-validity' id='the-select-element:dom-cva-validity'><c- g>validity</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-cva-validationmessage' id='the-select-element:dom-cva-validationmessage'><c- g>validationMessage</c-></a>;
  <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-checkvalidity' id='the-select-element:dom-cva-checkvalidity'><c- g>checkValidity</c-></a>();
  <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-reportvalidity' id='the-select-element:dom-cva-reportvalidity'><c- g>reportValidity</c-></a>();
  <c- b>undefined</c-> <a href='form-control-infrastructure.html#dom-cva-setcustomvalidity' id='the-select-element:dom-cva-setcustomvalidity'><c- g>setCustomValidity</c-></a>(<c- b>DOMString</c-> <c- g>error</c->);

  <c- b>undefined</c-> <a href='input.html#dom-select-showpicker' id='the-select-element:dom-select-showpicker'><c- g>showPicker</c-></a>();

  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-select-element:nodelist' href='https://dom.spec.whatwg.org/#interface-nodelist' data-x-internal='nodelist'><c- n>NodeList</c-></a> <a href='forms.html#dom-lfe-labels' id='the-select-element:dom-lfe-labels'><c- g>labels</c-></a>;
};</code></pre>
   </dl>
  

  <p>The <code id=the-select-element:the-select-element-2><a href=#the-select-element>select</a></code> element represents a control for selecting amongst a set of
  options.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple title="The Boolean multiple attribute, if set, means the form control accepts one or more values. Valid for the email and file input types and the <select>, the manner by which the user opts for multiple values depends on the form control.">Attributes/multiple</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=select id=attr-select-multiple data-dfn-type=element-attr><code>multiple</code></dfn>
  attribute is a <a id=the-select-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. If the attribute is present, then the
  <code id=the-select-element:the-select-element-3><a href=#the-select-element>select</a></code> element <a id=the-select-element:represents href=dom.html#represents>represents</a> a control for selecting zero or more options
  from the <a href=#concept-select-option-list id=the-select-element:concept-select-option-list>list of options</a>. If the attribute is
  absent, then the <code id=the-select-element:the-select-element-4><a href=#the-select-element>select</a></code> element <a id=the-select-element:represents-2 href=dom.html#represents>represents</a> a control for selecting a
  single option from the <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-2>list of options</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size title="The size attribute defines the width of the <input> and the height of the <select> element. For the input, if the type attribute is text or password then it's the number of characters. This must be an integer value of 0 or higher. If no size is specified, or an invalid value is specified, the input has no size declared, and the form control will be the default width based on the user agent. If CSS targets the element with properties impacting the width, CSS takes precedence.">Attributes/size</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=select id=attr-select-size data-dfn-type=element-attr><code>size</code></dfn> attribute
  gives the number of options to show to the user. The <code id=the-select-element:attr-select-size-3><a href=#attr-select-size>size</a></code>
  attribute, if specified, must have a value that is a <a id=the-select-element:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a>
  greater than zero.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required title="The Boolean required attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.">Attributes/required</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=select id=attr-select-required data-dfn-type=element-attr><code>required</code></dfn>
  attribute is a <a id=the-select-element:boolean-attribute-2 href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. When specified, the user will be required to select
  a value before submitting the form.</p>

  <p>The <code id=the-select-element:attr-fae-form-2><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> attribute is used to explicitly associate the
  <code id=the-select-element:the-select-element-5><a href=#the-select-element>select</a></code> element with its <a id=the-select-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>. The <code id=the-select-element:attr-fe-name-2><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute represents the element's name. The <code id=the-select-element:attr-fe-disabled-2><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> attribute is used to make the control non-interactive
  and to prevent its value from being submitted. The <code id=the-select-element:attr-fe-autocomplete-2><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> attribute controls how the user agent provides
  autofill behavior.</p>

  <p>If a <code id=the-select-element:the-select-element-6><a href=#the-select-element>select</a></code> element has a <code id=the-select-element:attr-select-required-2><a href=#attr-select-required>required</a></code>
  attribute specified, does not have a <code id=the-select-element:attr-select-multiple-3><a href=#attr-select-multiple>multiple</a></code> attribute
  specified, and has a <a href=#concept-select-size id=the-select-element:concept-select-size>display size</a> of 1; and if the <a href=#concept-option-value id=the-select-element:concept-option-value>value</a> of the first <code id=the-select-element:the-option-element><a href=#the-option-element>option</a></code> element in the
  <code id=the-select-element:the-select-element-7><a href=#the-select-element>select</a></code> element's <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-3>list of options</a> (if
  any) is the empty string, and that <code id=the-select-element:the-option-element-2><a href=#the-option-element>option</a></code> element's parent node is the
  <code id=the-select-element:the-select-element-8><a href=#the-select-element>select</a></code> element (and not an <code id=the-select-element:the-optgroup-element><a href=#the-optgroup-element>optgroup</a></code> element), then that
  <code id=the-select-element:the-option-element-3><a href=#the-option-element>option</a></code> is the <code id=the-select-element:the-select-element-9><a href=#the-select-element>select</a></code> element's <dfn id=placeholder-label-option>placeholder label option</dfn>.</p>

  <p>If a <code id=the-select-element:the-select-element-10><a href=#the-select-element>select</a></code> element has a <code id=the-select-element:attr-select-required-3><a href=#attr-select-required>required</a></code>
  attribute specified, does not have a <code id=the-select-element:attr-select-multiple-4><a href=#attr-select-multiple>multiple</a></code> attribute
  specified, and has a <a href=#concept-select-size id=the-select-element:concept-select-size-2>display size</a> of 1, then the
  <code id=the-select-element:the-select-element-11><a href=#the-select-element>select</a></code> element must have a <a href=#placeholder-label-option id=the-select-element:placeholder-label-option>placeholder label option</a>.</p>

  <p class=note>In practice, the requirement stated in the paragraph above can only apply when a
  <code id=the-select-element:the-select-element-12><a href=#the-select-element>select</a></code> element does not have a <code id=the-select-element:attr-select-size-4><a href=#attr-select-size>size</a></code> attribute
  with a value greater than 1.</p>

  

  <hr>

  <p><strong>Constraint validation</strong>: If the element has its <code id=the-select-element:attr-select-required-4><a href=#attr-select-required>required</a></code> attribute specified, and either none of the
  <code id=the-select-element:the-option-element-4><a href=#the-option-element>option</a></code> elements in the <code id=the-select-element:the-select-element-13><a href=#the-select-element>select</a></code> element's <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-4>list of options</a> have their <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness>selectedness</a> set to true, or the only
  <code id=the-select-element:the-option-element-5><a href=#the-option-element>option</a></code> element in the <code id=the-select-element:the-select-element-14><a href=#the-select-element>select</a></code> element's <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-5>list of options</a> with its <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-2>selectedness</a> set to true is the <a href=#placeholder-label-option id=the-select-element:placeholder-label-option-2>placeholder label
  option</a>, then the element is <a id=the-select-element:suffering-from-being-missing href=form-control-infrastructure.html#suffering-from-being-missing>suffering from being missing</a>.</p>

  <p>The <a href=form-control-infrastructure.html#concept-form-reset-control id=the-select-element:concept-form-reset-control>reset algorithm</a> for a <code id=the-select-element:the-select-element-15><a href=#the-select-element>select</a></code>
  element <var>selectElement</var> is:</p>

  <ol><li><p>Set <var>selectElement</var>'s <a id=the-select-element:user-validity href=form-control-infrastructure.html#user-validity>user validity</a> to false.<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=the-select-element:list-iterate data-x-internal=list-iterate>For each</a> <var>optionElement</var> of
    <var>selectElement</var>'s <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-6>list of
    options</a>:</p>

    <ol><li><p>If <var>optionElement</var> has a <code id=the-select-element:attr-option-selected><a href=#attr-option-selected>selected</a></code>
     attribute, then set <var>optionElement</var>'s <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-3>selectedness</a> to true; otherwise set it to
     false.<li><p>Set <var>optionElement</var>'s <a href=#concept-option-dirtiness id=the-select-element:concept-option-dirtiness>dirtiness</a>
     to false.</ol>
   <li><p>Run the <a href=#selectedness-setting-algorithm id=the-select-element:selectedness-setting-algorithm>selectedness setting algorithm</a> given
   <var>selectElement</var>.</ol>

  <p>A <code id=the-select-element:the-select-element-16><a href=#the-select-element>select</a></code> element that is not <a href=form-control-infrastructure.html#concept-fe-disabled id=the-select-element:concept-fe-disabled>disabled</a> is
  <i id=the-select-element:concept-fe-mutable><a href=form-control-infrastructure.html#concept-fe-mutable>mutable</a></i>.</p>

  <hr>

  <p>The user agent should allow the user to pick an <code id=the-select-element:the-option-element-6><a href=#the-option-element>option</a></code> element from a
  <code id=the-select-element:the-select-element-17><a href=#the-select-element>select</a></code> element in its <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-7>list of
  options</a> (either through a click, or through unfocusing the element after changing its
  value, or through a <a href=interactive-elements.html#using-the-option-element-to-define-a-command id=the-select-element:using-the-option-element-to-define-a-command>menu command</a>, or through any other
  mechanism) by running the <a href=#concept-select-pick id=the-select-element:concept-select-pick>pick an option</a> algorithm given
  the <code id=the-select-element:the-select-element-18><a href=#the-select-element>select</a></code> element, the <code id=the-select-element:the-option-element-7><a href=#the-option-element>option</a></code> element, and if <code id=the-select-element:the-select-element-19><a href=#the-select-element>select</a></code> and
  its <a id=the-select-element:select-popover href=rendering.html#select-popover>select popover</a> are both being rendered with <a id=the-select-element:base-appearance href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base appearance</a>, a
  corresponding <code id=the-select-element:event-keydown><a data-x-internal=event-keydown href=https://w3c.github.io/uievents/#event-type-keydown>keydown</a></code> or <code id=the-select-element:event-mouseup><a data-x-internal=event-mouseup href=https://w3c.github.io/uievents/#event-type-mouseup>mouseup</a></code> event, otherwise null.</p>

  <p>To <dfn id=concept-select-pick>pick an option</dfn> given a <code id=the-select-element:the-select-element-20><a href=#the-select-element>select</a></code> element
  <var>select</var>, an <code id=the-select-element:the-option-element-8><a href=#the-option-element>option</a></code> element <var>option</var>, and an <code id=the-select-element:event><a data-x-internal=event href=https://dom.spec.whatwg.org/#interface-event>Event</a></code> or
  null <var>event</var>:</p>

  <ol><li><p>If <var>select</var> has the <code id=the-select-element:attr-select-multiple-5><a href=#attr-select-multiple>multiple</a></code> attribute
   or <var>select</var> is <a href=form-control-infrastructure.html#concept-fe-disabled id=the-select-element:concept-fe-disabled-2>disabled</a>, then return.<li><p>If <var>event</var> is not null and <var>event</var>'s <a id=the-select-element:canceled-flag href=https://dom.spec.whatwg.org/#canceled-flag data-x-internal=canceled-flag>canceled flag</a> is set,
   then return.<li><p>If <var>event</var> is a <code id=the-select-element:mouseevent><a data-x-internal=mouseevent href=https://w3c.github.io/uievents/#mouseevent>MouseEvent</a></code> and <var>event</var>'s <code id=the-select-element:dom-mouseevent-button><a data-x-internal=dom-mouseevent-button href=https://w3c.github.io/uievents/#dom-mouseevent-button>button</a></code> attribute is not 1, then return.<li><p>Set <var>option</var>'s <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-4>selectedness</a> to
   true.<li><p>Set <var>option</var>'s <a href=#concept-option-dirtiness id=the-select-element:concept-option-dirtiness-2>dirtiness</a> to
   true.<li><p><a href=#send-select-update-notifications id=the-select-element:send-select-update-notifications>Send <code>select</code> update notifications</a> given
   <var>select</var>.<li><p>If <var>select</var> is being rendered as a <a id=the-select-element:drop-down-box-2 href=rendering.html#drop-down-box>drop-down box</a> with <a id=the-select-element:base-appearance-2 href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base
   appearance</a>, then run the <a id=the-select-element:hide-popover-algorithm href=popover.html#hide-popover-algorithm>hide popover algorithm</a> given <var>select</var>'s
   <a id=the-select-element:select-popover-2 href=rendering.html#select-popover>select popover</a>.</ol>

  <p>If the <code id=the-select-element:attr-select-multiple-6><a href=#attr-select-multiple>multiple</a></code> attribute is absent, whenever an
  <code id=the-select-element:the-option-element-9><a href=#the-option-element>option</a></code> element in the <code id=the-select-element:the-select-element-21><a href=#the-select-element>select</a></code> element's <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-8>list of options</a> has its <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-5>selectedness</a> set to true, and whenever an
  <code id=the-select-element:the-option-element-10><a href=#the-option-element>option</a></code> element with its <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-6>selectedness</a> set to true is added to the
  <code id=the-select-element:the-select-element-22><a href=#the-select-element>select</a></code> element's <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-9>list of options</a>,
  the user agent must set the <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-7>selectedness</a> of all
  the other <code id=the-select-element:the-option-element-11><a href=#the-option-element>option</a></code> elements in its <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-10>list of
  options</a> to false.</p>

  <p>If the <code id=the-select-element:attr-select-multiple-7><a href=#attr-select-multiple>multiple</a></code> attribute is absent and the
  element's <a href=#concept-select-size id=the-select-element:concept-select-size-3>display size</a> is greater than 1, then the user
  agent should also allow the user to request that the <code id=the-select-element:the-option-element-12><a href=#the-option-element>option</a></code> whose <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-8>selectedness</a> is true, if any, be unselected. Upon this
  request being conveyed to the user agent, and before the relevant user interaction event  is queued (e.g. before the <code id=the-select-element:event-click><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> event), the user agent must set the <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-9>selectedness</a> of that <code id=the-select-element:the-option-element-13><a href=#the-option-element>option</a></code> element to
  false, set its <a href=#concept-option-dirtiness id=the-select-element:concept-option-dirtiness-3>dirtiness</a> to true, and then
  <a href=#send-select-update-notifications id=the-select-element:send-select-update-notifications-2>send <code>select</code> update notifications</a>.</p>

  <p>If the <code id=the-select-element:the-select-element-23><a href=#the-select-element>select</a></code> is being rendered as a <a id=the-select-element:drop-down-box-3 href=rendering.html#drop-down-box>drop-down box</a> with <a id=the-select-element:base-appearance-3 href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base
  appearance</a>, then the user agent should allow the user to <dfn id=select-open-picker>open the picker</dfn> given a corresponding <code id=the-select-element:the-select-element-24><a href=#the-select-element>select</a></code>
  element <var>select</var> and a corresponding <code id=the-select-element:event-mousedown><a data-x-internal=event-mousedown href=https://w3c.github.io/uievents/#event-type-mousedown>mousedown</a></code> or
  <code id=the-select-element:event-keydown-2><a data-x-internal=event-keydown href=https://w3c.github.io/uievents/#event-type-keydown>keydown</a></code> event <var>event</var>:

  <ol><li><p>If <var>event</var>'s <a id=the-select-element:canceled-flag-2 href=https://dom.spec.whatwg.org/#canceled-flag data-x-internal=canceled-flag>canceled flag</a> is set, then return.<li><p>If <var>event</var>'s <code id=the-select-element:dom-mouseevent-button-2><a data-x-internal=dom-mouseevent-button href=https://w3c.github.io/uievents/#dom-mouseevent-button>button</a></code> attribute is not
   1, then return.<li><p>Run the <a id=the-select-element:show-popover href=popover.html#show-popover>show popover</a> algorithm given <var>select</var>'s <a id=the-select-element:select-popover-3 href=rendering.html#select-popover>select
   popover</a>, false, and <var>select</var>.</ol>

  <p>If the <code id=the-select-element:the-select-element-25><a href=#the-select-element>select</a></code> is being rendered as a <a id=the-select-element:drop-down-box-4 href=rendering.html#drop-down-box>drop-down box</a> with <a id=the-select-element:base-appearance-4 href=https://drafts.csswg.org/css-ui/#base-appearance data-x-internal=base-appearance>base
  appearance</a>, then the user agent should allow the user to <dfn id=focus-another-option>focus another option</dfn>
  given the new <code id=the-select-element:the-option-element-14><a href=#the-option-element>option</a></code> element to focus <var>option</var> and a <code id=the-select-element:event-keydown-3><a data-x-internal=event-keydown href=https://w3c.github.io/uievents/#event-type-keydown>keydown</a></code> event <var>event</var>:</p>

  <ol><li><p>If <var>event</var>'s <a id=the-select-element:canceled-flag-3 href=https://dom.spec.whatwg.org/#canceled-flag data-x-internal=canceled-flag>canceled flag</a> is set, then return.<li><p>Run the <a id=the-select-element:focusing-steps href=interaction.html#focusing-steps>focusing steps</a> on <var>option</var>.</ol>

  <p class=note>Implementations commonly allow the user to focus the next or previous option via
  the arrow-up and arrow-down keys, focus the first or last option via the Home or End keys, or
  focus the first or last option in the viewport of the picker via the PageUp or PageDown keys.</p>

  <p class=note>Which particular keys of the keyboard cause these actions might differ across
  implementations and platforms. The ARIA Authoring Practices Guide has good <a href=https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/>recommendations</a>
  for this behavior.</p>

  <p>If the <code id=the-select-element:attr-select-multiple-8><a href=#attr-select-multiple>multiple</a></code> attribute is present, and the
  element is not <a href=form-control-infrastructure.html#concept-fe-disabled id=the-select-element:concept-fe-disabled-3>disabled</a>, then the user agent should
  allow the user to <dfn id=concept-select-toggle>toggle</dfn> the <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-10>selectedness</a> of the <code id=the-select-element:the-option-element-15><a href=#the-option-element>option</a></code> elements in
  its <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-11>list of options</a> that are themselves not <a href=#concept-option-disabled id=the-select-element:concept-option-disabled>disabled</a>. Upon such an element being <a href=#concept-select-toggle id=the-select-element:concept-select-toggle>toggled</a> (either through a click, or through a <a href=interactive-elements.html#using-the-option-element-to-define-a-command id=the-select-element:using-the-option-element-to-define-a-command-2>menu command</a>, or any other mechanism), and before the relevant user
  interaction event  is queued (e.g. before a related <code id=the-select-element:event-click-2><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> event), the <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-11>selectedness</a> of the <code id=the-select-element:the-option-element-16><a href=#the-option-element>option</a></code> element must
  be changed (from true to false or false to true), the <a href=#concept-option-dirtiness id=the-select-element:concept-option-dirtiness-4>dirtiness</a> of the element must be set to true, and the
  user agent must <a href=#send-select-update-notifications id=the-select-element:send-select-update-notifications-3>send <code>select</code> update notifications</a>.</p>

  <hr>

  <p>The <dfn id=concept-select-size>display size</dfn> of a <code id=the-select-element:the-select-element-26><a href=#the-select-element>select</a></code> element is the
  result of applying the <a id=the-select-element:rules-for-parsing-non-negative-integers href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> to the value of the
  element's <code id=the-select-element:attr-select-size-5><a href=#attr-select-size>size</a></code> attribute, if it has one and parsing it is
  successful. If applying those rules to the attribute's value is not successful, or if the <code id=the-select-element:attr-select-size-6><a href=#attr-select-size>size</a></code> attribute is absent, then the element's <a href=#concept-select-size id=the-select-element:concept-select-size-4>display size</a> is 4 if the element's <code id=the-select-element:attr-select-multiple-9><a href=#attr-select-multiple>multiple</a></code> content attribute is present, and 1 otherwise.</p>

  <p>To get the <dfn id=concept-select-option-list>list of options</dfn> given a
  <code id=the-select-element:the-select-element-27><a href=#the-select-element>select</a></code> element <var>select</var>:</p>

  <ol><li><p>Let <var>options</var> be « ».<li><p>Let <var>node</var> be the <a id=the-select-element:first-child href=https://dom.spec.whatwg.org/#concept-tree-first-child data-x-internal=first-child>first child</a> of <var>select</var> in <a id=the-select-element:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree
   order</a>.<li>
    <p><a id=the-select-element:while href=https://infra.spec.whatwg.org/#iteration-while data-x-internal=while>While</a> <var>node</var> is not null:</p>

    <ol><li><p>If <var>node</var> is an <code id=the-select-element:the-option-element-17><a href=#the-option-element>option</a></code> element, then <a href=https://infra.spec.whatwg.org/#list-append id=the-select-element:list-append data-x-internal=list-append>append</a> <var>node</var> to <var>options</var>.<li>
      <p>If any of the following conditions are true:</p>

      <ul><li><p><var>node</var> is a <code id=the-select-element:the-select-element-28><a href=#the-select-element>select</a></code> element;<li><p><var>node</var> is an <code id=the-select-element:the-hr-element><a href=grouping-content.html#the-hr-element>hr</a></code> element;<li><p><var>node</var> is an <code id=the-select-element:the-option-element-18><a href=#the-option-element>option</a></code> element;<li><p><var>node</var> is an <code id=the-select-element:the-optgroup-element-2><a href=#the-optgroup-element>optgroup</a></code> element and <var>node</var> has an
       <a id=the-select-element:ancestor href=https://dom.spec.whatwg.org/#concept-tree-ancestor data-x-internal=ancestor>ancestor</a> <code id=the-select-element:the-optgroup-element-3><a href=#the-optgroup-element>optgroup</a></code> in between itself and <var>select</var>,</ul>

      <p>then set <var>node</var> to the next <a id=the-select-element:descendant href=https://dom.spec.whatwg.org/#concept-tree-descendant data-x-internal=descendant>descendant</a> of <var>select</var> in
      <a id=the-select-element:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>, excluding <var>node</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-descendant id=the-select-element:descendant-2 data-x-internal=descendant>descendants</a>, if any such node exists; otherwise null.</p>

      <p>Otherwise, set <var>node</var> to the next <a id=the-select-element:descendant-3 href=https://dom.spec.whatwg.org/#concept-tree-descendant data-x-internal=descendant>descendant</a> of <var>select</var> in
      <a id=the-select-element:tree-order-3 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>, if any such node exists; otherwise null.</p>
     </ol>
   <li><p>Return <var>options</var>.</ol>

  <p>If an <code id=the-select-element:the-option-element-19><a href=#the-option-element>option</a></code> element in the <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-12>list of
  options</a> <dfn id=ask-for-a-reset>asks for a reset</dfn>, then run that
  <code id=the-select-element:the-select-element-29><a href=#the-select-element>select</a></code> element's <a href=#selectedness-setting-algorithm id=the-select-element:selectedness-setting-algorithm-2>selectedness setting algorithm</a>.</p>

  <p>The <dfn id=selectedness-setting-algorithm>selectedness setting algorithm</dfn>, given a <code id=the-select-element:the-select-element-30><a href=#the-select-element>select</a></code> element
  <var>element</var>, is to run the following steps:</p>

  <ol><li><p>If <var>element</var>'s <code id=the-select-element:attr-select-multiple-10><a href=#attr-select-multiple>multiple</a></code> attribute is
   absent, and <var>element</var>'s <a href=#concept-select-size id=the-select-element:concept-select-size-5>display size</a> is 1,
   and no <code id=the-select-element:the-option-element-20><a href=#the-option-element>option</a></code> elements in the <var>element</var>'s <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-13>list of options</a> have their <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-12>selectedness</a> set to true, then set the <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-13>selectedness</a> of the first <code id=the-select-element:the-option-element-21><a href=#the-option-element>option</a></code>
   element in the <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-14>list of options</a> in
   <a id=the-select-element:tree-order-4 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> that is not <a href=#concept-option-disabled id=the-select-element:concept-option-disabled-2>disabled</a>,
   if any, to true, and return.<li><p>If <var>element</var>'s <code id=the-select-element:attr-select-multiple-11><a href=#attr-select-multiple>multiple</a></code> attribute is
   absent, and two or more <code id=the-select-element:the-option-element-22><a href=#the-option-element>option</a></code> elements in <var>element</var>'s <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-15>list of options</a> have their <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-14>selectedness</a> set to true, then set the <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-15>selectedness</a> of all but the last <code id=the-select-element:the-option-element-23><a href=#the-option-element>option</a></code>
   element with its <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-16>selectedness</a> set to true in
   the <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-16>list of options</a> in <a id=the-select-element:tree-order-5 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>
   to false.</ol>

  <p>To <dfn id=send-select-update-notifications>send <code>select</code> update notifications</dfn> for a <code id=the-select-element:the-select-element-31><a href=#the-select-element>select</a></code> element
  <var>element</var>, <a id=the-select-element:queue-an-element-task href=webappapis.html#queue-an-element-task>queue an element task</a> on the <a id=the-select-element:user-interaction-task-source href=webappapis.html#user-interaction-task-source>user interaction task
  source</a> given <var>element</var> to run these steps:</p>

  <ol><li>Set <var>element</var>'s <a id=the-select-element:user-validity-2 href=form-control-infrastructure.html#user-validity>user validity</a> to true.<li><p>Run <a href="#update-a-select's-selectedcontent" id="the-select-element:update-a-select's-selectedcontent">update a <code>select</code>'s <code>selectedcontent</code></a> given
   <var>element</var>.<li><p>Run <a href=#clone-selected-option-into-select-button id=the-select-element:clone-selected-option-into-select-button>clone selected <code>option</code> into <code>select</code> button</a> given
   <var>element</var>.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-select-element:concept-event-fire data-x-internal=concept-event-fire>Fire an event</a> named <code id=the-select-element:event-input><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> at <var>element</var>, with the <code id=the-select-element:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> and <code id=the-select-element:dom-event-composed><a data-x-internal=dom-event-composed href=https://dom.spec.whatwg.org/#dom-event-composed>composed</a></code>
   attributes initialized to true.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-select-element:concept-event-fire-2 data-x-internal=concept-event-fire>Fire an event</a> named <code id=the-select-element:event-change><a href=indices.html#event-change>change</a></code> at <var>element</var>, with the <code id=the-select-element:dom-event-bubbles-2><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> attribute initialized to true.</ol>

  

  <hr>

  <dl class=domintro><dt><code><var>select</var>.<a href=#dom-select-type id=dom-select-type-dev>type</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/type title="The HTMLSelectElement.type read-only property returns the form control's type.">HTMLSelectElement/type</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>2+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>1+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>Returns "<code>select-multiple</code>" if the element has a <code id=the-select-element:attr-select-multiple-12><a href=#attr-select-multiple>multiple</a></code> attribute, and "<code>select-one</code>"
    otherwise.</p>
   <dt><code><var>select</var>.<a href=#dom-select-options id=dom-select-options-dev>options</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/options title="The HTMLSelectElement.options read-only property returns a HTMLOptionsCollection of the <option> elements contained by the <select> element.">HTMLSelectElement/options</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd><p>Returns an <code id=the-select-element:htmloptionscollection-2><a href=common-dom-interfaces.html#htmloptionscollection>HTMLOptionsCollection</a></code> of the <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-17>list of options</a>.<dt><code><var>select</var>.<a href=#dom-select-length id=dom-select-length-dev>length</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the number of elements in the <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-18>list of
    options</a>.</p>

    <p>When set to a smaller number, truncates the number of <code id=the-select-element:the-option-element-24><a href=#the-option-element>option</a></code> elements in the
    <code id=the-select-element:the-select-element-32><a href=#the-select-element>select</a></code>.</p>

    <p>When set to a greater number, adds new blank <code id=the-select-element:the-option-element-25><a href=#the-option-element>option</a></code> elements to the
    <code id=the-select-element:the-select-element-33><a href=#the-select-element>select</a></code>.</p>
   <dt><code><var>element</var> = <var>select</var>.<a href=#dom-select-item id=dom-select-item-dev>item</a>(<var>index</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/item title="The HTMLSelectElement.item() method returns the Element corresponding to the HTMLOptionElement whose position in the options list corresponds to the index given in the parameter, or null if there are none.">HTMLSelectElement/item</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dt><code><var>select</var>[<var>index</var>]</code><dd>
    <p>Returns the item with index <var>index</var> from the <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-19>list of options</a>. The items are sorted in <a id=the-select-element:tree-order-6 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree
    order</a>.</p>
   <dt><code><var>element</var> = <var>select</var>.<a href=#dom-select-nameditem id=dom-select-nameditem-dev>namedItem</a>(<var>name</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/namedItem title="The HTMLSelectElement.namedItem() method returns the HTMLOptionElement corresponding to the HTMLOptionElement whose name or id match the specified name, or null if no option matches.">HTMLSelectElement/namedItem</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the first item with <a href=https://dom.spec.whatwg.org/#concept-id id=the-select-element:concept-id data-x-internal=concept-id>ID</a> or <code id=the-select-element:attr-option-name><a href=obsolete.html#attr-option-name>name</a></code> <var>name</var> from the <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-20>list of options</a>.</p>

    <p>Returns null if no element with that <a href=https://dom.spec.whatwg.org/#concept-id id=the-select-element:concept-id-2 data-x-internal=concept-id>ID</a> could be found.</p>
   <dt><code><var>select</var>.<a href=#dom-select-add id=dom-select-add-dev>add</a>(<var>element</var> [, <var>before</var> ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/add title="The HTMLSelectElement.add() method adds an element to the collection of option elements for this select element.">HTMLSelectElement/add</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Inserts <var>element</var> before the node given by <var>before</var>.</p>

    <p>The <var>before</var> argument can be a number, in which case <var>element</var> is inserted
    before the item with that number, or an element from the <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-21>list of options</a>, in which case <var>element</var> is
    inserted before that element.</p>

    <p>If <var>before</var> is omitted, null, or a number out of range, then <var>element</var> will
    be added at the end of the list.</p>

    <p>This method will throw a <a id=the-select-element:hierarchyrequesterror href=https://webidl.spec.whatwg.org/#hierarchyrequesterror data-x-internal=hierarchyrequesterror>"<code>HierarchyRequestError</code>"</a>
    <code id=the-select-element:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if <var>element</var> is an ancestor of the element into which it is
    to be inserted.</p>
   <dt><code><var>select</var>.<a href=#dom-select-selectedoptions id=dom-select-selectedoptions-dev>selectedOptions</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions title="The read-only HTMLSelectElement property selectedOptions contains a list of the <option> elements contained within the <select> element that are currently selected. The list of selected options is an HTMLCollection object with one entry per currently selected option.">HTMLSelectElement/selectedOptions</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>26+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>19+</span></span><hr><span class="opera yes"><span>Opera</span><span>9+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dd>
    <p>Returns an <code id=the-select-element:htmlcollection-2><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-22>list
    of options</a> that are selected.</p>
   <dt><code><var>select</var>.<a href=#dom-select-selectedindex id=dom-select-selectedindex-dev>selectedIndex</a> [ = <var>value</var> ]</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex title="The HTMLSelectElement.selectedIndex property is a long that reflects the index of the first or last selected <option> element, depending on the value of multiple. The value -1 indicates that no element is selected.">HTMLSelectElement/selectedIndex</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns the index of the first selected item, if any, or −1 if there is no selected
    item.</p>

    <p>Can be set, to change the selection.</p>
   <dt><code><var>select</var>.<a href=#dom-select-value id=dom-select-value-dev>value</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the <a href=#concept-option-value id=the-select-element:concept-option-value-2>value</a> of the first selected item, if
    any, or the empty string if there is no selected item.</p>

    <p>Can be set, to change the selection.</p>
   <dt><code><var>select</var>.<a href=input.html#dom-select-showpicker id=dom-select-showpicker-dev>showPicker</a>()</code><dd>
    <p>Shows any applicable picker UI for <var>select</var>, so that the user can select a value.

    <p>Throws an <a id=the-select-element:invalidstateerror href=https://webidl.spec.whatwg.org/#invalidstateerror data-x-internal=invalidstateerror>"<code>InvalidStateError</code>"</a> <code id=the-select-element:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if
    <var>select</var> is not <a href=form-control-infrastructure.html#concept-fe-mutable id=the-select-element:concept-fe-mutable-2>mutable</a>.</p>

    <p>Throws a <a id=the-select-element:notallowederror href=https://webidl.spec.whatwg.org/#notallowederror data-x-internal=notallowederror>"<code>NotAllowedError</code>"</a> <code id=the-select-element:domexception-3><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if called
    without <a href=interaction.html#transient-activation id=the-select-element:transient-activation>transient user activation</a>.</p>

    <p>Throws a <a id=the-select-element:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=the-select-element:domexception-4><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if
    <var>select</var> is inside a cross-origin <code id=the-select-element:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>.</p>

    <p>Throws a <a id=the-select-element:notsupportederror href=https://webidl.spec.whatwg.org/#notsupportederror data-x-internal=notsupportederror>"<code>NotSupportedError</code>"</a> <code id=the-select-element:domexception-5><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if
    <var>select</var> is not <a id=the-select-element:being-rendered href=rendering.html#being-rendered>being rendered</a>.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLSelectElement id=dom-select-type data-dfn-type=attribute><code>type</code></dfn> IDL
  attribute, on getting, must return the string "<code>select-one</code>" if the <code id=the-select-element:attr-select-multiple-13><a href=#attr-select-multiple>multiple</a></code> attribute is absent, and the string "<code>select-multiple</code>" if the <code id=the-select-element:attr-select-multiple-14><a href=#attr-select-multiple>multiple</a></code>
  attribute is present.</p>

  <p>The <dfn data-dfn-for=HTMLSelectElement id=dom-select-options data-dfn-type=attribute><code>options</code></dfn> IDL attribute must return an
  <code id=the-select-element:htmloptionscollection-3><a href=common-dom-interfaces.html#htmloptionscollection>HTMLOptionsCollection</a></code> rooted at the <code id=the-select-element:the-select-element-34><a href=#the-select-element>select</a></code> node, whose filter matches
  the elements in the <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-23>list of options</a>.</p>

  <p>The <code id=the-select-element:dom-select-options-2><a href=#dom-select-options>options</a></code> collection is also mirrored on the
  <code id=the-select-element:htmlselectelement><a href=#htmlselectelement>HTMLSelectElement</a></code> object. The <a id=the-select-element:supported-property-indices href=https://webidl.spec.whatwg.org/#dfn-supported-property-indices data-x-internal=supported-property-indices>supported property indices</a> at any instant
  are the indices supported by the object returned by the <code id=the-select-element:dom-select-options-3><a href=#dom-select-options>options</a></code> attribute at that instant.</p>

  <p>The <dfn data-dfn-for=HTMLSelectElement id=dom-select-length data-dfn-type=attribute><code>length</code></dfn>
  IDL attribute must return the number of nodes <a href=https://dom.spec.whatwg.org/#represented-by-the-collection id=the-select-element:represented-by-the-collection data-x-internal=represented-by-the-collection>represented</a> by the <code id=the-select-element:dom-select-options-4><a href=#dom-select-options>options</a></code> collection.
  On setting, it must act like the attribute of the same name on the <code id=the-select-element:dom-select-options-5><a href=#dom-select-options>options</a></code> collection.</p>

  <p>The <dfn data-dfn-for=HTMLSelectElement id=dom-select-item data-dfn-type=method><code>item(<var>index</var>)</code></dfn> method must return the value returned
  by <a href=https://dom.spec.whatwg.org/#dom-htmlcollection-item id=the-select-element:dom-htmlcollection-item data-x-internal=dom-htmlcollection-item>the method of the same name</a> on the <code id=the-select-element:dom-select-options-6><a href=#dom-select-options>options</a></code> collection, when invoked with the same argument.</p>

  <p>The <dfn data-dfn-for=HTMLSelectElement id=dom-select-nameditem data-dfn-type=method><code>namedItem(<var>name</var>)</code></dfn> method must return the value
  returned by <a href=https://dom.spec.whatwg.org/#dom-htmlcollection-nameditem id=the-select-element:dom-htmlcollection-nameditem data-x-internal=dom-htmlcollection-nameditem>the method of the same name</a> on the
  <code id=the-select-element:dom-select-options-7><a href=#dom-select-options>options</a></code> collection, when invoked with the same
  argument.</p>

  <p id=dom-select-setter>When the user agent is to <a id=the-select-element:set-the-value-of-a-new-indexed-property href=https://webidl.spec.whatwg.org/#dfn-set-the-value-of-a-new-indexed-property data-x-internal=set-the-value-of-a-new-indexed-property>set the value of a new indexed
  property</a> or <a id=the-select-element:set-the-value-of-an-existing-indexed-property href=https://webidl.spec.whatwg.org/#dfn-set-the-value-of-an-existing-indexed-property data-x-internal=set-the-value-of-an-existing-indexed-property>set the value of an existing indexed property</a> for a
  <code id=the-select-element:the-select-element-35><a href=#the-select-element>select</a></code> element, it must instead run <a href=common-dom-interfaces.html#dom-htmloptionscollection-setter>the
  corresponding algorithm</a> on the <code id=the-select-element:the-select-element-36><a href=#the-select-element>select</a></code> element's <code id=the-select-element:dom-select-options-8><a href=#dom-select-options>options</a></code> collection.</p>

  <p>Similarly, the <dfn data-dfn-for=HTMLSelectElement id=dom-select-add data-dfn-type=method><code>add(<var>element</var>, <var>before</var>)</code></dfn> method must act
  like its namesake method on that same <code id=the-select-element:dom-select-options-9><a href=#dom-select-options>options</a></code>
  collection.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/remove title="The HTMLSelectElement.remove() method removes the element at the specified index from the options collection for this select element.">HTMLSelectElement/remove</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLSelectElement id=dom-select-remove data-dfn-type=method><code>remove()</code></dfn>
  method must act like its namesake method on that same <code id=the-select-element:dom-select-options-10><a href=#dom-select-options>options</a></code> collection when it has arguments, and like its namesake
  method on the <code id=the-select-element:childnode><a data-x-internal=childnode href=https://dom.spec.whatwg.org/#interface-childnode>ChildNode</a></code> interface implemented by the <code id=the-select-element:htmlselectelement-2><a href=#htmlselectelement>HTMLSelectElement</a></code>
  ancestor interface <code id=the-select-element:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> when it has no arguments.</p>

  <p>The <dfn data-dfn-for=HTMLSelectElement id=dom-select-selectedoptions data-dfn-type=attribute><code>selectedOptions</code></dfn> IDL attribute must return an
  <code id=the-select-element:htmlcollection-3><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> rooted at the <code id=the-select-element:the-select-element-37><a href=#the-select-element>select</a></code> node, whose filter matches the
  elements in the <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-24>list of options</a> that have their
  <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-17>selectedness</a> set to true.</p>

  <p>The <dfn data-dfn-for=HTMLSelectElement id=dom-select-selectedindex data-dfn-type=attribute><code>selectedIndex</code></dfn> getter steps are to return the <a href=#concept-option-index id=the-select-element:concept-option-index>index</a> of the first <code id=the-select-element:the-option-element-26><a href=#the-option-element>option</a></code> element in
  <a id=the-select-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-25>list of options</a> in <a id=the-select-element:tree-order-7 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree
  order</a> that has its <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-18>selectedness</a> set to
  true, if any. If there isn't one, then return −1.</p>

  <p>The <code id=the-select-element:dom-select-selectedindex-2><a href=#dom-select-selectedindex>selectedIndex</a></code> setter steps are:</p>

  <ol><li><p>Let <var>firstMatchingOption</var> be null.<li>
    <p>For each <var>option</var> of <a id=the-select-element:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-26>list of options</a>:</p>

    <ol><li><p>Set <var>option</var>'s <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-19>selectedness</a>
     to false.<li><p>If <var>firstMatchingOption</var> is null and <var>option</var>'s <a href=#concept-option-index id=the-select-element:concept-option-index-2>index</a> is equal to the given value, then set
     <var>firstMatchingOption</var> to <var>option</var>.</ol>
   <li><p>If <var>firstMatchingOption</var> is not null, then set <var>firstMatchingOption</var>'s
   <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-20>selectedness</a> to true and set
   <var>firstMatchingOption</var>'s <a href=#concept-option-dirtiness id=the-select-element:concept-option-dirtiness-5>dirtiness</a> to
   true.<li><p>Run <a href="#update-a-select's-selectedcontent" id="the-select-element:update-a-select's-selectedcontent-2">update a <code>select</code>'s <code>selectedcontent</code></a> given
   <a id=the-select-element:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.</ol>

  <p class=note>This can result in no element having a <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-21>selectedness</a> set to true even in the case of the
  <code id=the-select-element:the-select-element-38><a href=#the-select-element>select</a></code> element having no <code id=the-select-element:attr-select-multiple-15><a href=#attr-select-multiple>multiple</a></code>
  attribute and a <a href=#concept-select-size id=the-select-element:concept-select-size-6>display size</a> of 1.</p>

  <p>The <dfn data-dfn-for=HTMLSelectElement id=dom-select-value data-dfn-type=attribute><code>value</code></dfn>
  getter steps are to return the <a href=#concept-option-value id=the-select-element:concept-option-value-3>value</a> of the
  first <code id=the-select-element:the-option-element-27><a href=#the-option-element>option</a></code> element in <a id=the-select-element:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-27>list of options</a> in <a id=the-select-element:tree-order-8 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> that has its
  <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-22>selectedness</a> set to true, if any. If there isn't
  one, then return the empty string.</p>

  <p>The <code id=the-select-element:dom-select-value-2><a href=#dom-select-value>value</a></code> setter steps are:</p>

  <ol><li><p>Let <var>firstMatchingOption</var> be null.<li>
    <p>For each <var>option</var> of <a id=the-select-element:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-select-option-list id=the-select-element:concept-select-option-list-28>list of options</a>:</p>

    <ol><li><p>Set <var>option</var>'s <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-23>selectedness</a>
     to false.<li><p>If <var>firstMatchingOption</var> is null and <var>option</var>'s <a href=#concept-option-value id=the-select-element:concept-option-value-4>value</a> is equal to the given value, then set
     <var>firstMatchingOption</var> to <var>option</var>.</ol>
   <li><p>If <var>firstMatchingOption</var> is not null, then set <var>firstMatchingOption</var>'s
   <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-24>selectedness</a> to true and set
   <var>firstMatchingOption</var>'s <a href=#concept-option-dirtiness id=the-select-element:concept-option-dirtiness-6>dirtiness</a> to
   true.<li><p>Run <a href="#update-a-select's-selectedcontent" id="the-select-element:update-a-select's-selectedcontent-3">update a <code>select</code>'s <code>selectedcontent</code></a> given
   <a id=the-select-element:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.</ol>

  <p class=note>This can result in no element having a <a href=#concept-option-selectedness id=the-select-element:concept-option-selectedness-25>selectedness</a> set to true even in the case of the
  <code id=the-select-element:the-select-element-39><a href=#the-select-element>select</a></code> element having no <code id=the-select-element:attr-select-multiple-16><a href=#attr-select-multiple>multiple</a></code>
  attribute and a <a href=#concept-select-size id=the-select-element:concept-select-size-7>display size</a> of 1.</p>

  <p class=note>For historical reasons, the default value of the <code id=the-select-element:dom-select-size><a href=#dom-select-size>size</a></code> IDL attribute does not return the actual size used, which, in
  the absence of the <code id=the-select-element:attr-select-size-7><a href=#attr-select-size>size</a></code> content attribute, is either 1 or 4
  depending on the presence of the <code id=the-select-element:attr-select-multiple-17><a href=#attr-select-multiple>multiple</a></code>
  attribute.</p>

  <p>The <code id=the-select-element:dom-cva-willvalidate-2><a href=form-control-infrastructure.html#dom-cva-willvalidate>willValidate</a></code>, <code id=the-select-element:dom-cva-validity-2><a href=form-control-infrastructure.html#dom-cva-validity>validity</a></code>, and <code id=the-select-element:dom-cva-validationmessage-2><a href=form-control-infrastructure.html#dom-cva-validationmessage>validationMessage</a></code> IDL attributes, and the <code id=the-select-element:dom-cva-checkvalidity-2><a href=form-control-infrastructure.html#dom-cva-checkvalidity>checkValidity()</a></code>, <code id=the-select-element:dom-cva-reportvalidity-2><a href=form-control-infrastructure.html#dom-cva-reportvalidity>reportValidity()</a></code>, and <code id=the-select-element:dom-cva-setcustomvalidity-2><a href=form-control-infrastructure.html#dom-cva-setcustomvalidity>setCustomValidity()</a></code> methods, are part of the
  <a id=the-select-element:the-constraint-validation-api href=form-control-infrastructure.html#the-constraint-validation-api>constraint validation API</a>. The <code id=the-select-element:dom-lfe-labels-2><a href=forms.html#dom-lfe-labels>labels</a></code> IDL
  attribute provides a list of the element's <code id=the-select-element:the-label-element><a href=forms.html#the-label-element>label</a></code>s. The <code id=the-select-element:dom-select-disabled><a href=#dom-select-disabled>disabled</a></code>, <code id=the-select-element:dom-fae-form-2><a href=form-control-infrastructure.html#dom-fae-form>form</a></code>, and <code id=the-select-element:dom-select-name><a href=#dom-select-name>name</a></code> IDL attributes are part of the element's forms API.</p>

  

  <hr>

  <div class=example>

   <p>The following example shows how a <code id=the-select-element:the-select-element-40><a href=#the-select-element>select</a></code> element can be used to offer the user
   with a set of options from which the user can select a single option. The default option is
   preselected.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>&quot;unittype&quot;</c-><c- p>&gt;</c->Select unit type:<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>select</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;unittype&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;unittype&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1&quot;</c-><c- p>&gt;</c-> Miner <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;2&quot;</c-><c- p>&gt;</c-> Puffer <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;3&quot;</c-> <c- e>selected</c-><c- p>&gt;</c-> Snipey <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;4&quot;</c-><c- p>&gt;</c-> Max <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;5&quot;</c-><c- p>&gt;</c-> Firebot <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>When there is no default option, a placeholder can be used instead:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>select</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;unittype&quot;</c-> <strong><c- e>required</c-></strong><c- p>&gt;</c->
 <strong><c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c-> Select unit type <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1&quot;</c-><c- p>&gt;</c-> Miner <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;2&quot;</c-><c- p>&gt;</c-> Puffer <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;3&quot;</c-><c- p>&gt;</c-> Snipey <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;4&quot;</c-><c- p>&gt;</c-> Max <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;5&quot;</c-><c- p>&gt;</c-> Firebot <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>Here, the user is offered a set of options from which they can select any number. By default,
   all five options are selected.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>&quot;allowedunits&quot;</c-><c- p>&gt;</c->Select unit types to enable on this map:<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>select</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;allowedunits&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;allowedunits&quot;</c-> <c- e>multiple</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;1&quot;</c-> <c- e>selected</c-><c- p>&gt;</c-> Miner <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;2&quot;</c-> <c- e>selected</c-><c- p>&gt;</c-> Puffer <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;3&quot;</c-> <c- e>selected</c-><c- p>&gt;</c-> Snipey <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;4&quot;</c-> <c- e>selected</c-><c- p>&gt;</c-> Max <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;5&quot;</c-> <c- e>selected</c-><c- p>&gt;</c-> Firebot <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>Sometimes, a user has to select one or more items. This example shows such an interface.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
 Select the songs from that you would like on your Act II Mix Tape:
 <c- p>&lt;</c-><c- f>select</c-> <c- e>multiple</c-> <c- e>required</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;act2&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s1&quot;</c-><c- p>&gt;</c->It Sucks to Be Me (Reprise)
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s2&quot;</c-><c- p>&gt;</c->There is Life Outside Your Apartment
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s3&quot;</c-><c- p>&gt;</c->The More You Ruv Someone
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s4&quot;</c-><c- p>&gt;</c->Schadenfreude
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s5&quot;</c-><c- p>&gt;</c->I Wish I Could Go Back to College
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s6&quot;</c-><c- p>&gt;</c->The Money Song
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s7&quot;</c-><c- p>&gt;</c->School for Monsters
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s8&quot;</c-><c- p>&gt;</c->The Money Song (Reprise)
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s9&quot;</c-><c- p>&gt;</c->There&apos;s a Fine, Fine Line (Reprise)
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s10&quot;</c-><c- p>&gt;</c->What Do You Do With a B.A. in English? (Reprise)
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s11&quot;</c-><c- p>&gt;</c->For Now
 <c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>
   <p>Occasionally it can be useful to have a separator:

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
 Select the song to play next:
 <c- p>&lt;</c-><c- f>select</c-> <c- e>required</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;next&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;sr&quot;</c-><c- p>&gt;</c->Random
  <c- p>&lt;</c-><c- f>hr</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s1&quot;</c-><c- p>&gt;</c->It Sucks to Be Me (Reprise)
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;s2&quot;</c-><c- p>&gt;</c->There is Life Outside Your Apartment
  …</code></pre>
  </div>

  <div id=example-customizable-select class=example><a href=#example-customizable-select class=self-link></a>
   <p>Here is an example which uses <code id=the-select-element:the-div-element><a href=grouping-content.html#the-div-element>div</a></code>, <code id=the-select-element:the-legend-element><a href=#the-legend-element>legend</a></code>,
   <code id=the-select-element:the-img-element><a href=embedded-content.html#the-img-element>img</a></code>, <code id=the-select-element:the-button-element-2><a href=#the-button-element>button</a></code>, and <code id=the-select-element:the-selectedcontent-element><a href=#the-selectedcontent-element>selectedcontent</a></code> elements:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>select</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>button</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>selectedcontent</c-><c- p>&gt;&lt;/</c-><c- f>selectedcontent</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>button</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;border&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>optgroup</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->WHATWG Specifications<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;html.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->
        HTML
      <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;dom.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->
        DOM
      <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
    <c- p>&lt;/</c-><c- f>optgroup</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>class</c-><c- o>=</c-><c- s>&quot;border&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>optgroup</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->W3C Specifications<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;forms.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->
        CSS Form Control Styling
      <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
      <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;pseudo.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->
        CSS Pseudo-Elements
      <c- p>&lt;/</c-><c- f>option</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>optgroup</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>div</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p id=note-first-button-in-select-not-submit class=note><a href=#note-first-button-in-select-not-submit class=self-link></a>The first child <code id=the-select-element:the-button-element-3><a href=#the-button-element>button</a></code>
  element as allowed by the content model of <code id=the-select-element:the-select-element-41><a href=#the-select-element>select</a></code> is not a submit button. It is used
  to replace the in-page rendering of the <code id=the-select-element:the-select-element-42><a href=#the-select-element>select</a></code> element. Its form submission behavior
  is prevented because it is <a id=the-select-element:inert href=interaction.html#inert>inert</a>.</p>



  <h4 id=the-datalist-element><span class=secno>4.10.8</span> The <dfn data-dfn-type=element><code>datalist</code></dfn> element<a href=#the-datalist-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist title="The <datalist> HTML element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.">Element/datalist</a><div class=support><span class="firefox yes"><span>Firefox</span><span title="Partial implementation.">🔰 4+</span></span><span class="safari yes"><span>Safari</span><span>12.1+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>9.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span title="Partial implementation.">🔰 79+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>33+</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLDataListElement title="The HTMLDataListElement interface provides special properties (beyond the HTMLElement object interface it also has available to it by inheritance) to manipulate <datalist> elements and their content.">HTMLDataListElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>12.1+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>4.4.3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-datalist-element:concept-element-categories>Categories</a>:<dd><a id=the-datalist-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-datalist-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-contexts id=the-datalist-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-datalist-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-datalist-element:concept-element-content-model>Content model</a>:<dd>Either: <a id=the-datalist-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>phrasing content</a>.<dd>Or: Zero or more <code id=the-datalist-element:the-option-element><a href=#the-option-element>option</a></code> and <a href=dom.html#script-supporting-elements-2 id=the-datalist-element:script-supporting-elements-2>script-supporting</a> elements.<dt><a href=dom.html#concept-element-tag-omission id=the-datalist-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-datalist-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-datalist-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-datalist-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-datalist>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-datalist>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-datalist-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmldatalistelement' data-dfn-type='interface'><c- g>HTMLDataListElement</c-></dfn> : <a id='the-datalist-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-datalist-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-datalist-element:htmlcollection' href='https://dom.spec.whatwg.org/#interface-htmlcollection' data-x-internal='htmlcollection'><c- n>HTMLCollection</c-></a> <a href='#dom-datalist-options' id='the-datalist-element:dom-datalist-options'><c- g>options</c-></a>;
};</code></pre>
   </dl>

  <p>The <code id=the-datalist-element:the-datalist-element><a href=#the-datalist-element>datalist</a></code> element represents a set of <code id=the-datalist-element:the-option-element-2><a href=#the-option-element>option</a></code> elements that
  represent predefined options for other controls. In the rendering, the <code id=the-datalist-element:the-datalist-element-2><a href=#the-datalist-element>datalist</a></code>
  element <a id=the-datalist-element:represents href=dom.html#represents>represents</a> nothing and it, along with its children, should
  be hidden.</p>

  <p>The <code id=the-datalist-element:the-datalist-element-3><a href=#the-datalist-element>datalist</a></code> element can be used in two ways. In the simplest case, the
  <code id=the-datalist-element:the-datalist-element-4><a href=#the-datalist-element>datalist</a></code> element has just <code id=the-datalist-element:the-option-element-3><a href=#the-option-element>option</a></code> element children.</p>

  <div class=example>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
 Animal:
 <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>animal</c-> <c- e>list</c-><c- o>=</c-><c- s>animals</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>animals</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Cat&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Dog&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>In the more elaborate case, the <code id=the-datalist-element:the-datalist-element-5><a href=#the-datalist-element>datalist</a></code> element can be given contents that are to
  be displayed for down-level clients that don't support <code id=the-datalist-element:the-datalist-element-6><a href=#the-datalist-element>datalist</a></code>. In this case, the
  <code id=the-datalist-element:the-option-element-4><a href=#the-option-element>option</a></code> elements are provided inside a <code id=the-datalist-element:the-select-element><a href=#the-select-element>select</a></code> element inside the
  <code id=the-datalist-element:the-datalist-element-7><a href=#the-datalist-element>datalist</a></code> element.</p>

  <div class=example>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
 Animal:
 <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>animal</c-> <c- e>list</c-><c- o>=</c-><c- s>animals</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>animals</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
  or select from the list:
  <c- p>&lt;</c-><c- f>select</c-> <c- e>name</c-><c- o>=</c-><c- s>animal</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Cat
   <c- p>&lt;</c-><c- f>option</c-><c- p>&gt;</c->Dog
  <c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>The <code id=the-datalist-element:the-datalist-element-8><a href=#the-datalist-element>datalist</a></code> element is hooked up to an <code id=the-datalist-element:the-input-element><a href=input.html#the-input-element>input</a></code> element using the <code id=the-datalist-element:attr-input-list><a href=input.html#attr-input-list>list</a></code> attribute on the <code id=the-datalist-element:the-input-element-2><a href=input.html#the-input-element>input</a></code> element.</p>

  <p>Each <code id=the-datalist-element:the-option-element-5><a href=#the-option-element>option</a></code> element that is a descendant of the <code id=the-datalist-element:the-datalist-element-9><a href=#the-datalist-element>datalist</a></code> element,
  that is not <a href=#concept-option-disabled id=the-datalist-element:concept-option-disabled>disabled</a>, and whose <a href=#concept-option-value id=the-datalist-element:concept-option-value>value</a> is a string that isn't the empty string, represents a
  suggestion. Each suggestion has a <a href=#concept-option-value id=the-datalist-element:concept-option-value-2>value</a> and a <a href=#concept-option-label id=the-datalist-element:concept-option-label>label</a>.

  <dl class=domintro><dt><code><var>datalist</var>.<a href=#dom-datalist-options id=dom-datalist-options-dev>options</a></code><dd>
    <p>Returns an <code id=the-datalist-element:htmlcollection-2><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the <code id=the-datalist-element:the-option-element-6><a href=#the-option-element>option</a></code> elements of the
    <code id=the-datalist-element:the-datalist-element-10><a href=#the-datalist-element>datalist</a></code> element.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLDataListElement id=dom-datalist-options data-dfn-type=attribute><code>options</code></dfn> IDL attribute must return an
  <code id=the-datalist-element:htmlcollection-3><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> rooted at the <code id=the-datalist-element:the-datalist-element-11><a href=#the-datalist-element>datalist</a></code> node, whose filter matches
  <code id=the-datalist-element:the-option-element-7><a href=#the-option-element>option</a></code> elements.</p>

  <p><strong>Constraint validation</strong>: If an element has a <code id=the-datalist-element:the-datalist-element-12><a href=#the-datalist-element>datalist</a></code> element
  ancestor, it is <a id=the-datalist-element:barred-from-constraint-validation href=form-control-infrastructure.html#barred-from-constraint-validation>barred from constraint validation</a>.</p>

  


  <h4 id=the-optgroup-element><span class=secno>4.10.9</span> The <dfn data-dfn-type=element><code>optgroup</code></dfn> element<a href=#the-optgroup-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup title="The <optgroup> HTML element creates a grouping of options within a <select> element.">Element/optgroup</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptGroupElement title="The HTMLOptGroupElement interface provides special properties and methods (beyond the regular HTMLElement object interface they also have available to them by inheritance) for manipulating the layout and presentation of <optgroup> elements.">HTMLOptGroupElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-optgroup-element:concept-element-categories>Categories</a>:<dd><a id=the-optgroup-element:select-element-inner-content-elements-2 href=dom.html#select-element-inner-content-elements-2><code>select</code> element inner content elements</a>.<dt><a href=dom.html#concept-element-contexts id=the-optgroup-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a descendant of a <code id=the-optgroup-element:the-select-element><a href=#the-select-element>select</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-optgroup-element:concept-element-content-model>Content model</a>:<dd>Zero or one <code id=the-optgroup-element:the-legend-element><a href=#the-legend-element>legend</a></code> element followed by zero or more <a id=the-optgroup-element:optgroup-element-inner-content-elements-2 href=dom.html#optgroup-element-inner-content-elements-2><code>optgroup</code>
   element inner content elements</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-optgroup-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>An <code id=the-optgroup-element:the-optgroup-element><a href=#the-optgroup-element>optgroup</a></code> element's <a href=syntax.html#syntax-end-tag id=the-optgroup-element:syntax-end-tag>end tag</a> can be omitted
  if the <code id=the-optgroup-element:the-optgroup-element-2><a href=#the-optgroup-element>optgroup</a></code> element  is
  immediately followed by another <code id=the-optgroup-element:the-optgroup-element-3><a href=#the-optgroup-element>optgroup</a></code> element, if it is immediately followed by an
  <code id=the-optgroup-element:the-hr-element><a href=grouping-content.html#the-hr-element>hr</a></code> element, or if  there is no more content in the parent
  element.<dt><a href=dom.html#concept-element-attributes id=the-optgroup-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-optgroup-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-optgroup-element:attr-optgroup-disabled><a href=#attr-optgroup-disabled>disabled</a></code> —  Whether the form control is disabled
     <dd><code id=the-optgroup-element:attr-optgroup-label><a href=#attr-optgroup-label>label</a></code> —  User-visible label
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-optgroup-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-optgroup>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-optgroup>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-optgroup-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmloptgroupelement' data-dfn-type='interface'><c- g>HTMLOptGroupElement</c-></dfn> : <a id='the-optgroup-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-optgroup-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-optgroup-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-optgroup-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLOptGroupElement' id='dom-optgroup-disabled' data-dfn-type='attribute'><c- g>disabled</c-></dfn>;
  [<a id='the-optgroup-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-optgroup-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLOptGroupElement' id='dom-optgroup-label' data-dfn-type='attribute'><c- g>label</c-></dfn>;
};</code></pre>
   </dl>

  <p>The <code id=the-optgroup-element:the-optgroup-element-4><a href=#the-optgroup-element>optgroup</a></code> element <a id=the-optgroup-element:represents href=dom.html#represents>represents</a> a group of <code id=the-optgroup-element:the-option-element><a href=#the-option-element>option</a></code>
  elements with a common label.</p>

  <p>The element's group of <code id=the-optgroup-element:the-option-element-2><a href=#the-option-element>option</a></code> elements consists of the <code id=the-optgroup-element:the-option-element-3><a href=#the-option-element>option</a></code>
  elements that are children of the <code id=the-optgroup-element:the-optgroup-element-5><a href=#the-optgroup-element>optgroup</a></code> element.</p>

  

  <p>When showing <code id=the-optgroup-element:the-option-element-4><a href=#the-option-element>option</a></code> elements in <code id=the-optgroup-element:the-select-element-2><a href=#the-select-element>select</a></code> elements, user agents should
  show the <code id=the-optgroup-element:the-option-element-5><a href=#the-option-element>option</a></code> elements of such groups as being related to each other and separate
  from other <code id=the-optgroup-element:the-option-element-6><a href=#the-option-element>option</a></code> elements.</p>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=optgroup id=attr-optgroup-disabled data-dfn-type=element-attr><code>disabled</code></dfn> attribute is a <a id=the-optgroup-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean
  attribute</a> and can be used to <a href=#concept-option-disabled id=the-optgroup-element:concept-option-disabled>disable</a> a group
  of <code id=the-optgroup-element:the-option-element-7><a href=#the-option-element>option</a></code> elements together.</p>

  <p>The <dfn data-dfn-for=optgroup id=attr-optgroup-label data-dfn-type=element-attr><code>label</code></dfn>
  attribute must be specified if the <code id=the-optgroup-element:the-optgroup-element-6><a href=#the-optgroup-element>optgroup</a></code> has no child <code id=the-optgroup-element:the-legend-element-2><a href=#the-legend-element>legend</a></code>
  element.</p>

  <p>The <code id=the-optgroup-element:the-optgroup-element-7><a href=#the-optgroup-element>optgroup</a></code> <a href=infrastructure.html#html-element-removing-steps id=the-optgroup-element:html-element-removing-steps>HTML element removing
  steps</a>, given <var>removedNode</var> and <var>oldParent</var>, are:</p>

  <ol><li><p>If <var>oldParent</var> is a <code id=the-optgroup-element:the-select-element-3><a href=#the-select-element>select</a></code> element and <var>removedNode</var> has an
   <code id=the-optgroup-element:the-option-element-8><a href=#the-option-element>option</a></code> child, then run <var>oldParent</var>'s <a href=#selectedness-setting-algorithm id=the-optgroup-element:selectedness-setting-algorithm>selectedness setting
   algorithm</a>.</ol>

  <p>The <code id=the-optgroup-element:the-optgroup-element-8><a href=#the-optgroup-element>optgroup</a></code> <a id=the-optgroup-element:html-element-moving-steps href=infrastructure.html#html-element-moving-steps>HTML element moving steps</a>, given <var>movedNode</var>
  and <var>oldParent</var>, are:</p>

  <ol><li><p>Run the <code id=the-optgroup-element:the-optgroup-element-9><a href=#the-optgroup-element>optgroup</a></code> <a id=the-optgroup-element:html-element-removing-steps-2 href=infrastructure.html#html-element-removing-steps>HTML element removing steps</a> given
   <var>movedNode</var> and <var>oldParent</var>.</ol>

  <p>To <dfn id=concept-optgroup-label>get an <code>optgroup</code> element's label</dfn>,
  given an <code id=the-optgroup-element:the-optgroup-element-10><a href=#the-optgroup-element>optgroup</a></code> <var>optgroup</var>:</p>

  <ol><li><p>If <var>optgroup</var> has a child <code id=the-optgroup-element:the-legend-element-3><a href=#the-legend-element>legend</a></code> element, then return the result of
   <a href=https://infra.spec.whatwg.org/#strip-and-collapse-ascii-whitespace id=the-optgroup-element:strip-and-collapse-ascii-whitespace data-x-internal=strip-and-collapse-ascii-whitespace>stripping and collapsing ASCII
   whitespace</a> from the concatenation of <a href=https://dom.spec.whatwg.org/#concept-cd-data id=the-optgroup-element:concept-cd-data data-x-internal=concept-cd-data>data</a> of all the
   <code id=the-optgroup-element:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node descendants of <var>optgroup</var>'s first child <code id=the-optgroup-element:the-legend-element-4><a href=#the-legend-element>legend</a></code>
   element, in <a id=the-optgroup-element:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>, excluding any that are descendants of descendants of the
   <code id=the-optgroup-element:the-legend-element-5><a href=#the-legend-element>legend</a></code> that are themselves <code id=the-optgroup-element:the-script-element><a href=scripting.html#the-script-element>script</a></code> or <a id=the-optgroup-element:svg-script href=https://svgwg.org/svg2-draft/interact.html#ScriptElement data-x-internal=svg-script>SVG
   <code>script</code></a> elements.<li><p>Otherwise, return the value of <var>optgroup</var>'s <code id=the-optgroup-element:attr-optgroup-label-2><a href=#attr-optgroup-label>label</a></code> attribute.</ol>

  <p>The value of the <a href=#concept-optgroup-label id=the-optgroup-element:concept-optgroup-label><code>optgroup</code> label
  algorithm</a> gives the name of the group, for the purposes of the user interface. User agents should use this attribute's value when labeling the group of
  <code id=the-optgroup-element:the-option-element-9><a href=#the-option-element>option</a></code> elements in a <code id=the-optgroup-element:the-select-element-4><a href=#the-select-element>select</a></code> element.</p>

  <p class=note>There is no way to select an <code id=the-optgroup-element:the-optgroup-element-11><a href=#the-optgroup-element>optgroup</a></code> element. Only
  <code id=the-optgroup-element:the-option-element-10><a href=#the-option-element>option</a></code> elements can be selected. An <code id=the-optgroup-element:the-optgroup-element-12><a href=#the-optgroup-element>optgroup</a></code> element merely provides a
  label for a group of <code id=the-optgroup-element:the-option-element-11><a href=#the-option-element>option</a></code> elements.</p>

  <div class=example>

   <p>The following snippet shows how a set of lessons from three courses could be offered in a
   <code id=the-optgroup-element:the-select-element-5><a href=#the-select-element>select</a></code> drop-down widget:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;courseselector.dll&quot;</c-> <c- e>method</c-><c- o>=</c-><c- s>&quot;get&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Which course would you like to watch today?
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Course:
  <c- p>&lt;</c-><c- f>select</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;c&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>optgroup</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;8.01 Physics I: Classical Mechanics&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.01.1&quot;</c-><c- p>&gt;</c->Lecture 01: Powers of Ten
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.01.2&quot;</c-><c- p>&gt;</c->Lecture 02: 1D Kinematics
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.01.3&quot;</c-><c- p>&gt;</c->Lecture 03: Vectors
   <c- p>&lt;</c-><c- f>optgroup</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;8.02 Electricity and Magnetism&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.02.1&quot;</c-><c- p>&gt;</c->Lecture 01: What holds our world together?
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.02.2&quot;</c-><c- p>&gt;</c->Lecture 02: Electric Field
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.02.3&quot;</c-><c- p>&gt;</c->Lecture 03: Electric Flux
   <c- p>&lt;</c-><c- f>optgroup</c-> <c- e>label</c-><c- o>=</c-><c- s>&quot;8.03 Physics III: Vibrations and Waves&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.03.1&quot;</c-><c- p>&gt;</c->Lecture 01: Periodic Phenomenon
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.03.2&quot;</c-><c- p>&gt;</c->Lecture 02: Beats
    <c- p>&lt;</c-><c- f>option</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;8.03.3&quot;</c-><c- p>&gt;</c->Lecture 03: Forced Oscillations with Damping
  <c- p>&lt;/</c-><c- f>select</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;▶ Play&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=the-option-element><span class=secno>4.10.10</span> The <dfn data-dfn-type=element><code>option</code></dfn> element<a href=#the-option-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option title="The <option> HTML element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document.">Element/option</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement title="The HTMLOptionElement interface represents <option> elements and inherits all properties and methods of the HTMLElement interface.">HTMLOptionElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1.2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-option-element:concept-element-categories>Categories</a>:<dd><a id=the-option-element:select-element-inner-content-elements-2 href=dom.html#select-element-inner-content-elements-2><code>select</code> element inner content elements</a>.<dd><a id=the-option-element:optgroup-element-inner-content-elements-2 href=dom.html#optgroup-element-inner-content-elements-2><code>optgroup</code> element inner content elements</a>.<dt><a href=dom.html#concept-element-contexts id=the-option-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a descendant of a <code id=the-option-element:the-select-element><a href=#the-select-element>select</a></code> element.<dd>As a descendant of a <code id=the-option-element:the-datalist-element><a href=#the-datalist-element>datalist</a></code> element.<dd>As a descendant of an <code id=the-option-element:the-optgroup-element><a href=#the-optgroup-element>optgroup</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-option-element:concept-element-content-model>Content model</a>:<dd>If the element has a <code id=the-option-element:attr-option-label><a href=#attr-option-label>label</a></code> attribute and a <code id=the-option-element:attr-option-value><a href=#attr-option-value>value</a></code> attribute: <a href=dom.html#concept-content-nothing id=the-option-element:concept-content-nothing>Nothing</a>.<dd>If the element has a <code id=the-option-element:attr-option-label-2><a href=#attr-option-label>label</a></code> attribute but no <code id=the-option-element:attr-option-value-2><a href=#attr-option-value>value</a></code> attribute: <a href=dom.html#text-content id=the-option-element:text-content>Text</a>.<dd>If the element has no <code id=the-option-element:attr-option-label-3><a href=#attr-option-label>label</a></code> attribute and is not a
   descendant of a <code id=the-option-element:the-datalist-element-2><a href=#the-datalist-element>datalist</a></code> element: Zero or more <a id=the-option-element:option-element-inner-content-elements-2 href=dom.html#option-element-inner-content-elements-2><code>option</code> element
   inner content elements</a>.<dd>If the element has no <code id=the-option-element:attr-option-label-4><a href=#attr-option-label>label</a></code> attribute and is a
   descendant of a <code id=the-option-element:the-datalist-element-3><a href=#the-datalist-element>datalist</a></code> element: <a href=dom.html#text-content id=the-option-element:text-content-2>Text</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-option-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>An <code id=the-option-element:the-option-element><a href=#the-option-element>option</a></code> element's <a href=syntax.html#syntax-end-tag id=the-option-element:syntax-end-tag>end tag</a> can be omitted if
  the <code id=the-option-element:the-option-element-2><a href=#the-option-element>option</a></code> element is immediately followed by another <code id=the-option-element:the-option-element-3><a href=#the-option-element>option</a></code> element, if
  it is immediately followed by an <code id=the-option-element:the-optgroup-element-2><a href=#the-optgroup-element>optgroup</a></code> element, if it is immediately followed by
  an <code id=the-option-element:the-hr-element><a href=grouping-content.html#the-hr-element>hr</a></code> element, or if there is no more content in the parent element.<dt><a href=dom.html#concept-element-attributes id=the-option-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-option-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-option-element:attr-option-disabled><a href=#attr-option-disabled>disabled</a></code> —  Whether the form control is disabled
     <dd><code id=the-option-element:attr-option-label-5><a href=#attr-option-label>label</a></code> —  User-visible label
     <dd><code id=the-option-element:attr-option-selected><a href=#attr-option-selected>selected</a></code> —  Whether the option is selected by default
     <dd><code id=the-option-element:attr-option-value-3><a href=#attr-option-value>value</a></code> —  Value to be used for <a id=the-option-element:form-submission-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-option-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-option>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-option>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-option-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->,
 <a id='the-option-element:legacyfactoryfunction' href='https://webidl.spec.whatwg.org/#LegacyFactoryFunction' data-x-internal='legacyfactoryfunction'><c- g>LegacyFactoryFunction</c-></a>=<a href='#dom-option' id='the-option-element:dom-option'><c- n>Option</c-></a>(<c- b>optional</c-> <c- b>DOMString</c-> <c- g>text</c-> = &quot;&quot;, <c- b>optional</c-> <c- b>DOMString</c-> <c- g>value</c->, <c- b>optional</c-> <c- b>boolean</c-> <c- g>defaultSelected</c-> = <c- b>false</c->, <c- b>optional</c-> <c- b>boolean</c-> <c- g>selected</c-> = <c- b>false</c->)]
<c- b>interface</c-> <dfn id='htmloptionelement' data-dfn-type='interface'><c- g>HTMLOptionElement</c-></dfn> : <a id='the-option-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-option-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-option-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-option-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLOptionElement' id='dom-option-disabled' data-dfn-type='attribute'><c- g>disabled</c-></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-option-element:htmlformelement' href='forms.html#htmlformelement'><c- n>HTMLFormElement</c-></a>? <a href='#dom-option-form' id='the-option-element:dom-option-form'><c- g>form</c-></a>;
  [<a id='the-option-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-option-element:xattr-reflectsetter'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-option-label' id='the-option-element:dom-option-label'><c- g>label</c-></a>;
  [<a id='the-option-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-option-element:xattr-reflect-2'>Reflect</a>=&quot;<a href='#attr-option-selected' id='the-option-element:attr-option-selected-2'>selected</a>&quot;] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLOptionElement' id='dom-option-defaultselected' data-dfn-type='attribute'><c- g>defaultSelected</c-></dfn>;
  <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-option-selected' id='the-option-element:dom-option-selected'><c- g>selected</c-></a>;
  [<a id='the-option-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-option-element:xattr-reflectsetter-2'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-option-value' id='the-option-element:dom-option-value'><c- g>value</c-></a>;

  [<a id='the-option-element:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-option-text' id='the-option-element:dom-option-text'><c- g>text</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>long</c-> <a href='#dom-option-index' id='the-option-element:dom-option-index'><c- g>index</c-></a>;
};</code></pre>
   </dl>

  <p>The <code id=the-option-element:the-option-element-4><a href=#the-option-element>option</a></code> element <a id=the-option-element:represents href=dom.html#represents>represents</a> an option in a <code id=the-option-element:the-select-element-2><a href=#the-select-element>select</a></code>
  element or as part of a list of suggestions in a <code id=the-option-element:the-datalist-element-4><a href=#the-datalist-element>datalist</a></code> element.</p>

  <p>In certain circumstances described in the definition of the <code id=the-option-element:the-select-element-3><a href=#the-select-element>select</a></code> element, an
  <code id=the-option-element:the-option-element-5><a href=#the-option-element>option</a></code> element can be a <code id=the-option-element:the-select-element-4><a href=#the-select-element>select</a></code> element's <a href=#placeholder-label-option id=the-option-element:placeholder-label-option>placeholder label
  option</a>. A <a href=#placeholder-label-option id=the-option-element:placeholder-label-option-2>placeholder label option</a> does not represent an actual option, but
  instead represents a label for the <code id=the-option-element:the-select-element-5><a href=#the-select-element>select</a></code> control.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled title="The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.">Attributes/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=option id=attr-option-disabled data-dfn-type=element-attr><code>disabled</code></dfn>
  attribute is a <a id=the-option-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. An <code id=the-option-element:the-option-element-6><a href=#the-option-element>option</a></code> element is <dfn id=concept-option-disabled>disabled</dfn> if its <code id=the-option-element:attr-option-disabled-2><a href=#attr-option-disabled>disabled</a></code> attribute is present or if it is a child of an
  <code id=the-option-element:the-optgroup-element-3><a href=#the-optgroup-element>optgroup</a></code> element whose <code id=the-option-element:attr-optgroup-disabled><a href=#attr-optgroup-disabled>disabled</a></code>
  attribute is present.</p>

  

  <p>An <code id=the-option-element:the-option-element-7><a href=#the-option-element>option</a></code> element that is <a href=#attr-option-disabled id=the-option-element:attr-option-disabled-3>disabled</a> must
  prevent any <code id=the-option-element:event-click><a data-x-internal=event-click href=https://w3c.github.io/uievents/#event-type-click>click</a></code> events that are <a href=webappapis.html#queue-a-task id=the-option-element:queue-a-task>queued</a> on the <a id=the-option-element:user-interaction-task-source href=webappapis.html#user-interaction-task-source>user interaction task source</a> from being dispatched on the
  element.</p>

  

  <p class=note>Being <a href=#concept-option-disabled id=the-option-element:concept-option-disabled>disabled</a> does not prevent all
  modifications to the <code id=the-option-element:the-option-element-8><a href=#the-option-element>option</a></code> element. For example, its <a href=#concept-option-selectedness id=the-option-element:concept-option-selectedness>selectedness</a> could be modified programmatically from
  JavaScript. Or, it could be indirectly modified by user action, e.g., if other non-disabled
  <code id=the-option-element:the-option-element-9><a href=#the-option-element>option</a></code> elements in the <code id=the-option-element:the-select-element-6><a href=#the-select-element>select</a></code> element were modified.</p>

  <p>The <dfn data-dfn-for=option id=attr-option-label data-dfn-type=element-attr><code>label</code></dfn>
  attribute provides a label for element. The <dfn id=concept-option-label>label</dfn> of an
  <code id=the-option-element:the-option-element-10><a href=#the-option-element>option</a></code> element is the value of the <code id=the-option-element:attr-option-label-6><a href=#attr-option-label>label</a></code>
  content attribute, if there is one and its value is not the empty string, or, otherwise, the value
  of the element's <code id=the-option-element:dom-option-text-2><a href=#dom-option-text>text</a></code> IDL attribute.</p>

  <p>The <code id=the-option-element:attr-option-label-7><a href=#attr-option-label>label</a></code> content attribute, if specified, must not be
  empty.</p>

  <p>The <dfn data-dfn-for=option id=attr-option-value data-dfn-type=element-attr><code>value</code></dfn>
  attribute provides a value for element. The <dfn id=concept-option-value>value</dfn> of an
  <code id=the-option-element:the-option-element-11><a href=#the-option-element>option</a></code> element is the value of the <code id=the-option-element:attr-option-value-4><a href=#attr-option-value>value</a></code>
  content attribute, if there is one, or, if there is not, the result of <a href=#collect-option-text id=the-option-element:collect-option-text>collect option
  text</a> given <a id=the-option-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> and false.</p>

  <p>The <dfn data-dfn-for=option id=attr-option-selected data-dfn-type=element-attr><code>selected</code></dfn>
  attribute is a <a id=the-option-element:boolean-attribute-2 href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>. It represents the default <a href=#concept-option-selectedness id=the-option-element:concept-option-selectedness-2>selectedness</a> of the element.</p>

  

  <p>The <dfn id=concept-option-dirtiness>dirtiness</dfn> of an <code id=the-option-element:the-option-element-12><a href=#the-option-element>option</a></code> element is
  a boolean state, initially false. It controls whether adding or removing the <code id=the-option-element:attr-option-selected-3><a href=#attr-option-selected>selected</a></code> content attribute has any effect.</p>

  <p>The <dfn id=concept-option-selectedness>selectedness</dfn> of an <code id=the-option-element:the-option-element-13><a href=#the-option-element>option</a></code>
  element is a boolean state, initially false. Except where otherwise specified, when the element is
  created, its <a href=#concept-option-selectedness id=the-option-element:concept-option-selectedness-3>selectedness</a> must be set to true if
  the element has a <code id=the-option-element:attr-option-selected-4><a href=#attr-option-selected>selected</a></code> attribute. Whenever an
  <code id=the-option-element:the-option-element-14><a href=#the-option-element>option</a></code> element's <code id=the-option-element:attr-option-selected-5><a href=#attr-option-selected>selected</a></code> attribute is
  added, if its <a href=#concept-option-dirtiness id=the-option-element:concept-option-dirtiness>dirtiness</a> is false, its <a href=#concept-option-selectedness id=the-option-element:concept-option-selectedness-4>selectedness</a> must be set to true. Whenever an
  <code id=the-option-element:the-option-element-15><a href=#the-option-element>option</a></code> element's <code id=the-option-element:attr-option-selected-6><a href=#attr-option-selected>selected</a></code> attribute is
  <em>removed</em>, if its <a href=#concept-option-dirtiness id=the-option-element:concept-option-dirtiness-2>dirtiness</a> is false, its
  <a href=#concept-option-selectedness id=the-option-element:concept-option-selectedness-5>selectedness</a> must be set to false.</p>

  <p class=note>The <code id=the-option-element:dom-option-2><a href=#dom-option>Option()</a></code> constructor, when called with three
  or fewer arguments, overrides the initial state of the <a href=#concept-option-selectedness id=the-option-element:concept-option-selectedness-6>selectedness</a> state to always be false even if the third
  argument is true (implying that a <code id=the-option-element:attr-option-selected-7><a href=#attr-option-selected>selected</a></code> attribute is
  to be set). The fourth argument can be used to explicitly set the initial <a href=#concept-option-selectedness id=the-option-element:concept-option-selectedness-7>selectedness</a> state when using the constructor.</p>

  

  

  <p>A <code id=the-option-element:the-select-element-7><a href=#the-select-element>select</a></code> element whose <code id=the-option-element:attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
  attribute is not specified must not have more than one descendant <code id=the-option-element:the-option-element-16><a href=#the-option-element>option</a></code> element with
  its <code id=the-option-element:attr-option-selected-8><a href=#attr-option-selected>selected</a></code> attribute set.</p>

  

  <p>An <code id=the-option-element:the-option-element-17><a href=#the-option-element>option</a></code> element's <dfn id=concept-option-index>index</dfn> is the number of
  <code id=the-option-element:the-option-element-18><a href=#the-option-element>option</a></code> elements that are in the same <a href=#concept-select-option-list id=the-option-element:concept-select-option-list>list of
  options</a> but that come before it in <a id=the-option-element:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>. If the <code id=the-option-element:the-option-element-19><a href=#the-option-element>option</a></code>
  element is not in a <a href=#concept-select-option-list id=the-option-element:concept-select-option-list-2>list of options</a>, then the
  <code id=the-option-element:the-option-element-20><a href=#the-option-element>option</a></code> element's <a href=#concept-option-index id=the-option-element:concept-option-index>index</a> is zero.</p>

  

  <p>The <code id=the-option-element:the-option-element-21><a href=#the-option-element>option</a></code> <a id=the-option-element:html-element-insertion-steps href=infrastructure.html#html-element-insertion-steps>HTML element insertion steps</a>, given
  <var>insertedOption</var>, are:</p>

  <ol><li>
    <p>For each <var>ancestor</var> of <var>insertedOption</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-ancestor id=the-option-element:ancestor data-x-internal=ancestor>ancestors</a> in reverse <a id=the-option-element:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

    <ol><li><p>If <var>ancestor</var> is a <code id=the-option-element:the-select-element-8><a href=#the-select-element>select</a></code> element, then run the <a href=#selectedness-setting-algorithm id=the-option-element:selectedness-setting-algorithm>selectedness
     setting algorithm</a> given <var>ancestor</var> and return.</ol>
   </ol>

  <p>The <code id=the-option-element:the-option-element-22><a href=#the-option-element>option</a></code> <a id=the-option-element:html-element-removing-steps href=infrastructure.html#html-element-removing-steps>HTML element removing steps</a>, given
  <var>removedOption</var> and <var>oldParent</var>, are:</p>

  <ol><li>
    <p>For each <var>ancestor</var> of <var>oldParent</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor id=the-option-element:inclusive-ancestor data-x-internal=inclusive-ancestor>inclusive ancestors</a> in reverse <a id=the-option-element:tree-order-3 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

    <ol><li><p>If <var>ancestor</var> is a <code id=the-option-element:the-select-element-9><a href=#the-select-element>select</a></code> element, then run the <a href=#selectedness-setting-algorithm id=the-option-element:selectedness-setting-algorithm-2>selectedness
     setting algorithm</a> given <var>ancestor</var> and return.</ol>
  </ol>

  <p>The <code id=the-option-element:the-option-element-23><a href=#the-option-element>option</a></code> <a id=the-option-element:html-element-moving-steps href=infrastructure.html#html-element-moving-steps>HTML element moving steps</a>, given <var>movedNode</var> and
  <var>oldParent</var>, are:</p>

  <ol><li><p>Run the <code id=the-option-element:the-option-element-24><a href=#the-option-element>option</a></code> <a id=the-option-element:html-element-removing-steps-2 href=infrastructure.html#html-element-removing-steps>HTML element removing steps</a> given
   <var>movedNode</var> and <var>oldParent</var>.<li><p>Run the <code id=the-option-element:the-option-element-25><a href=#the-option-element>option</a></code> <a id=the-option-element:html-element-insertion-steps-2 href=infrastructure.html#html-element-insertion-steps>HTML element insertion steps</a> given
   <var>movedNode</var>.</ol>

  <p>To get the <dfn id=option-element-nearest-ancestor-select><code>option</code> element nearest ancestor <code>select</code></dfn> given an
  <code id=the-option-element:the-option-element-26><a href=#the-option-element>option</a></code> <var>option</var>, run these steps. They return a <code id=the-option-element:the-select-element-10><a href=#the-select-element>select</a></code> or
  null.</p>

  <ol><li>
    <p>For each <var>ancestor</var> of <var>option</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-ancestor id=the-option-element:ancestor-2 data-x-internal=ancestor>ancestors</a>,
    in reverse <a id=the-option-element:tree-order-4 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

    <ol><li><p>If <var>ancestor</var> is a <code id=the-option-element:the-select-element-11><a href=#the-select-element>select</a></code>, then return
     <var>ancestor</var>.</ol>
   <li><p>Return null.</ol>

  <p>To <dfn id=maybe-clone-an-option-into-selectedcontent>maybe clone an <code>option</code> into <code>selectedcontent</code></dfn>, given an
  <code id=the-option-element:the-option-element-27><a href=#the-option-element>option</a></code> <var>option</var>:</p>

  <ol><li><p>Let <var>select</var> be <var>option</var>'s <a href=#option-element-nearest-ancestor-select id=the-option-element:option-element-nearest-ancestor-select><code>option</code> element nearest
   ancestor <code>select</code></a>.<li>
    <p>If all of the following conditions are true:</p>

    <ul><li><p><var>select</var> is not null;<li><p><var>option</var>'s <a href=#concept-option-selectedness id=the-option-element:concept-option-selectedness-8>selectedness</a> is
     true; and<li><p><var>select</var>'s <a href=#select-enabled-selectedcontent id=the-option-element:select-enabled-selectedcontent>enabled
     <code>selectedcontent</code></a> is not null,</ul>

    <p>then run <a href=#clone-an-option-into-a-selectedcontent id=the-option-element:clone-an-option-into-a-selectedcontent>clone an <code>option</code> into a <code>selectedcontent</code></a> given
    <var>option</var> and <var>select</var>'s <a href=#select-enabled-selectedcontent id=the-option-element:select-enabled-selectedcontent-2>enabled
    <code>selectedcontent</code></a>.</p>
   </ol>

  <p>To <dfn id=clone-selected-option-into-select-button>clone selected <code>option</code> into <code>select</code> button</dfn>, given a
  <code id=the-option-element:the-select-element-12><a href=#the-select-element>select</a></code> element <var>select</var>:</p>

  <ol><li><p>Let <var>option</var> be the first element of <var>select</var>'s <a href=#concept-select-option-list id=the-option-element:concept-select-option-list-3>option list</a> whose <a href=#concept-option-selectedness id=the-option-element:concept-option-selectedness-9>selectedness</a> is set to true, if such an element
   exists; otherwise null.<li><p>Let <var>text</var> be the empty string.<li><p>If <var>option</var> is not null, then set <var>text</var> to <var>option</var>'s <a href=#dom-option-label id=the-option-element:dom-option-label-2>label</a>.<li><p>Set <var>select</var>'s <a id=the-option-element:select-fallback-button-text href=rendering.html#select-fallback-button-text>select fallback button text</a> to
   <var>text</var>.</ol>

  <dl class=domintro><dt><code><var>option</var>.<a href=#dom-option-selected id=dom-option-selected-dev>selected</a></code><dd>
    <p>Returns true if the element is selected, and false otherwise.</p>

    <p>Can be set, to override the current state of the element.</p>
   <dt><code><var>option</var>.<a href=#dom-option-index id=dom-option-index-dev>index</a></code><dd><p>Returns the index of the element in its <code id=the-option-element:the-select-element-13><a href=#the-select-element>select</a></code> element's <code id=the-option-element:dom-select-options><a href=#dom-select-options>options</a></code> list.<dt><code><var>option</var>.<a href=#dom-option-form id=dom-option-form-dev>form</a></code><dd><p>Returns the element's <code id=the-option-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element, if any, or null otherwise.<dt><code><var>option</var>.<a href=#dom-option-text id=dom-option-text-dev>text</a></code><dd>
    <p>Same as <code id=the-option-element:textcontent><a data-x-internal=textcontent href=https://dom.spec.whatwg.org/#dom-node-textcontent>textContent</a></code>, except that spaces are collapsed and <code id=the-option-element:the-script-element><a href=scripting.html#the-script-element>script</a></code>
    elements are skipped.</p>
   <dt><code><var>option</var> = new <a href=#dom-option id=dom-option-dev>Option</a>([ <var>text</var> [, <var>value</var> [, <var>defaultSelected</var> [, <var>selected</var> ] ] ] ])</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option title="The Option() constructor creates a new HTMLOptionElement.">HTMLOptionElement/Option</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1.2+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dd>
    <p>Returns a new <code id=the-option-element:the-option-element-28><a href=#the-option-element>option</a></code> element.</p>

    <p>The <var>text</var> argument sets the contents of the element.</p>

    <p>The <var>value</var> argument sets the <code id=the-option-element:attr-option-value-5><a href=#attr-option-value>value</a></code>
    attribute.</p>

    <p>The <var>defaultSelected</var> argument sets the <code id=the-option-element:attr-option-selected-9><a href=#attr-option-selected>selected</a></code> attribute.</p>

    <p>The <var>selected</var> argument sets whether or not the element is selected. If it is
    omitted, even if the <var>defaultSelected</var> argument is true, the element is not
    selected.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLOptionElement id=dom-option-label data-dfn-type=attribute><code>label</code></dfn>
  getter steps are:</p>

  <ol><li><p>Let <var>attribute</var> be <a id=the-option-element:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <code id=the-option-element:attr-option-label-8><a href=#attr-option-label>label</a></code> attribute.<li><p>If <var>attribute</var> is null, then return <a id=the-option-element:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-option-label id=the-option-element:concept-option-label>label</a>.<li><p>Return <var>attribute</var>'s <a href=https://dom.spec.whatwg.org/#concept-attribute-value id=the-option-element:concept-attribute-value data-x-internal=concept-attribute-value>value</a>.</ol>

  <p>The <dfn data-dfn-for=HTMLOptionElement id=dom-option-value data-dfn-type=attribute><code>value</code></dfn>
  getter steps are to return <a id=the-option-element:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-option-value id=the-option-element:concept-option-value>value</a>.</p>

  <p>The <dfn data-dfn-for=HTMLOptionElement id=dom-option-selected data-dfn-type=attribute><code>selected</code></dfn> IDL attribute, on getting, must return true if
  the element's <a href=#concept-option-selectedness id=the-option-element:concept-option-selectedness-10>selectedness</a> is true, and false
  otherwise. On setting, it must set the element's <a href=#concept-option-selectedness id=the-option-element:concept-option-selectedness-11>selectedness</a> to the new value, set its <a href=#concept-option-dirtiness id=the-option-element:concept-option-dirtiness-3>dirtiness</a> to true, and then cause the element to
  <a href=#ask-for-a-reset id=the-option-element:ask-for-a-reset>ask for a reset</a>.</p>

  <p>The <dfn data-dfn-for=HTMLOptionElement id=dom-option-index data-dfn-type=attribute><code>index</code></dfn>
  IDL attribute must return the element's <a href=#concept-option-index id=the-option-element:concept-option-index-2>index</a>.</p>

  <p>The <dfn data-dfn-for=HTMLOptionElement id=dom-option-text data-dfn-type=attribute><code>text</code></dfn>
  getter steps are to return the result of <a href=#collect-option-text id=the-option-element:collect-option-text-2>collect option text</a> given <a id=the-option-element:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>
  and false.</p>

  <p>The <code id=the-option-element:dom-option-text-3><a href=#dom-option-text>text</a></code> setter steps are to <a id=the-option-element:string-replace-all href=https://dom.spec.whatwg.org/#string-replace-all data-x-internal=string-replace-all>string replace
  all</a> with the given value within <a id=the-option-element:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.</p>

  <p>The <dfn data-dfn-for=HTMLOptionElement id=dom-option-form data-dfn-type=attribute><code>form</code></dfn> IDL
  attribute's behavior depends on whether the <code id=the-option-element:the-option-element-29><a href=#the-option-element>option</a></code> element is in a
  <code id=the-option-element:the-select-element-14><a href=#the-select-element>select</a></code> element or not. If the <code id=the-option-element:the-option-element-30><a href=#the-option-element>option</a></code> has a <code id=the-option-element:the-select-element-15><a href=#the-select-element>select</a></code> element
  as its parent, or has an <code id=the-option-element:the-optgroup-element-4><a href=#the-optgroup-element>optgroup</a></code> element as its parent and that
  <code id=the-option-element:the-optgroup-element-5><a href=#the-optgroup-element>optgroup</a></code> element has a <code id=the-option-element:the-select-element-16><a href=#the-select-element>select</a></code> element as its parent, then the <code id=the-option-element:dom-option-form-2><a href=#dom-option-form>form</a></code> IDL attribute must return the same value as the <code id=the-option-element:dom-fae-form><a href=form-control-infrastructure.html#dom-fae-form>form</a></code> IDL attribute on that <code id=the-option-element:the-select-element-17><a href=#the-select-element>select</a></code> element. Otherwise, it
  must return null.</p>

  <p>A legacy factory function is provided for creating <code id=the-option-element:htmloptionelement><a href=#htmloptionelement>HTMLOptionElement</a></code> objects (in
  addition to the factory methods from DOM such as <code id=the-option-element:dom-document-createelement><a data-x-internal=dom-document-createelement href=https://dom.spec.whatwg.org/#dom-document-createelement>createElement()</a></code>): <dfn data-dfn-for=HTMLOptionElement id=dom-option data-dfn-type=constructor><code>Option(<var>text</var>, <var>value</var>,
  <var>defaultSelected</var>, <var>selected</var>)</code></dfn>. When invoked, the legacy factory
  function must perform the following steps:</p>

  <ol><li><p>Let <var>document</var> be the <a id=the-option-element:current-global-object href=webappapis.html#current-global-object>current global object</a>'s <a href=nav-history-apis.html#concept-document-window id=the-option-element:concept-document-window>associated <code>Document</code></a>.<li><p>Let <var>option</var> be the result of <a href=https://dom.spec.whatwg.org/#concept-create-element id=the-option-element:create-an-element data-x-internal=create-an-element>creating an
   element</a> given <var>document</var>, "<code>option</code>", and the <a id=the-option-element:html-namespace-2 href=https://infra.spec.whatwg.org/#html-namespace data-x-internal=html-namespace-2>HTML
   namespace</a>.<li><p>If <var>text</var> is not the empty string, then append to <var>option</var> a new
   <code id=the-option-element:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node whose data is <var>text</var>.<li><p>If <var>value</var> is given, then <a href=https://dom.spec.whatwg.org/#concept-element-attributes-set-value id=the-option-element:concept-element-attributes-set-value data-x-internal=concept-element-attributes-set-value>set
   an attribute value</a> for <var>option</var> using "<code id=the-option-element:attr-option-value-6><a href=#attr-option-value>value</a></code>" and <var>value</var>.<li><p>If <var>defaultSelected</var> is true, then <a href=https://dom.spec.whatwg.org/#concept-element-attributes-set-value id=the-option-element:concept-element-attributes-set-value-2 data-x-internal=concept-element-attributes-set-value>set an attribute value</a> for <var>option</var>
   using "<code id=the-option-element:attr-option-selected-10><a href=#attr-option-selected>selected</a></code>" and the empty string.<li><p>If <var>selected</var> is true, then set <var>option</var>'s <a href=#concept-option-selectedness id=the-option-element:concept-option-selectedness-12>selectedness</a> to true; otherwise set its <a href=#concept-option-selectedness id=the-option-element:concept-option-selectedness-13>selectedness</a> to false (even if
   <var>defaultSelected</var> is true).<li><p>Return <var>option</var>.</ol>

  <p>To <dfn id=collect-option-text>collect option text</dfn>, given an <code id=the-option-element:the-option-element-31><a href=#the-option-element>option</a></code> element <var>option</var> and a
  boolean <var>includeAltText</var>:</p>

  <ol><li><p>Let <var>text</var> be the empty string.<li>
    <p>For each <a id=the-option-element:descendant href=https://dom.spec.whatwg.org/#concept-tree-descendant data-x-internal=descendant>descendant</a> <var>descendant</var> of <var>option</var> in <a id=the-option-element:tree-order-5 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

    <ol><li><p>If <var>descendant</var> is a <code id=the-option-element:the-script-element-2><a href=scripting.html#the-script-element>script</a></code> or <a id=the-option-element:svg-script href=https://svgwg.org/svg2-draft/interact.html#ScriptElement data-x-internal=svg-script>SVG
     <code>script</code></a> element, then <a id=the-option-element:continue href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>continue</a> skipping all <a href=https://dom.spec.whatwg.org/#concept-tree-descendant id=the-option-element:descendant-2 data-x-internal=descendant>descendants</a> of <var>descendant</var>.<li><p>If <var>descendant</var> is a <code id=the-option-element:text-2><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node, then set <var>text</var> to the
     concatenation of <var>text</var> and <var>descendant</var>'s <a href=https://dom.spec.whatwg.org/#concept-cd-data id=the-option-element:concept-cd-data data-x-internal=concept-cd-data>data</a>.<li>
      <p>If <var>descendant</var> is an <code id=the-option-element:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element and <var>includeAltText</var> is
      true, then:</p>

      <ol><li><p>If the value of <var>descendant</var>'s <code id=the-option-element:attr-img-alt><a href=embedded-content.html#attr-img-alt>alt</a></code>
       attribute is not empty, then set <var>text</var> to the concatenation of <var>text</var>,
       <code>" "</code>, the value of <var>descendant</var>'s <code id=the-option-element:attr-img-alt-2><a href=embedded-content.html#attr-img-alt>alt</a></code> attribute, and <code>" "</code>.<li><p><a id=the-option-element:continue-2 href=https://infra.spec.whatwg.org/#iteration-continue data-x-internal=continue>Continue</a> skipping all <a href=https://dom.spec.whatwg.org/#concept-tree-descendant id=the-option-element:descendant-3 data-x-internal=descendant>descendants</a> of
       <var>descendant</var>.</ol>
     </ol>
   <li><p>Return the result of <a id=the-option-element:strip-and-collapse-ascii-whitespace href=https://infra.spec.whatwg.org/#strip-and-collapse-ascii-whitespace data-x-internal=strip-and-collapse-ascii-whitespace>strip and collapse ASCII whitespace</a> given
   <var>text</var>.</ol>

  

  <p id=note-option-no-value class=note><a href=#note-option-no-value class=self-link></a>When no <code id=the-option-element:attr-option-value-7><a href=#attr-option-value>value</a></code>
  attribute is set on the <code id=the-option-element:the-option-element-32><a href=#the-option-element>option</a></code> element, its text contents are used to generate a
  submittable value. In the case that the <code id=the-option-element:the-option-element-33><a href=#the-option-element>option</a></code> element has child elements, this can
  lead to unexpected results such as <code id=the-option-element:the-option-element-34><a href=#the-option-element>option</a></code> elements which render differently but have
  the same value. In order to address this, setting the <code id=the-option-element:attr-option-value-8><a href=#attr-option-value>value</a></code> attribute on <code id=the-option-element:the-option-element-35><a href=#the-option-element>option</a></code> elements is
  recommended.</p>



  <h4 id=the-textarea-element><span class=secno>4.10.11</span> The <dfn data-dfn-type=element><code>textarea</code></dfn> element<a href=#the-textarea-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea title="The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.">Element/textarea</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement title="The HTMLTextAreaElement interface provides special properties and methods for manipulating the layout and presentation of <textarea> elements.">HTMLTextAreaElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>8+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-textarea-element:concept-element-categories>Categories</a>:<dd><a id=the-textarea-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-textarea-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-textarea-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a href=forms.html#category-listed id=the-textarea-element:category-listed>Listed</a>, <a href=forms.html#category-label id=the-textarea-element:category-label>labelable</a>, <a href=forms.html#category-submit id=the-textarea-element:category-submit>submittable</a>, <a href=forms.html#category-reset id=the-textarea-element:category-reset>resettable</a>, and <a href=forms.html#category-autocapitalize id=the-textarea-element:category-autocapitalize>autocapitalize-and-autocorrect inheriting</a> <a id=the-textarea-element:form-associated-element href=forms.html#form-associated-element>form-associated element</a>.<dd><a id=the-textarea-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-textarea-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-textarea-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-textarea-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#text-content id=the-textarea-element:text-content>Text</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-textarea-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-textarea-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-textarea-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-textarea-element:attr-fe-autocomplete><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> —  Hint for form autofill feature
     <dd><code id=the-textarea-element:attr-textarea-cols><a href=#attr-textarea-cols>cols</a></code> —  Maximum number of characters per line
     <dd><code id=the-textarea-element:attr-fe-dirname><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code> —  Name of form control to use for sending the element's <a href=dom.html#the-directionality id=the-textarea-element:the-directionality>directionality</a> in <a id=the-textarea-element:form-submission-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-textarea-element:attr-fe-disabled><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> —  Whether the form control is disabled
     <dd><code id=the-textarea-element:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> —  Associates the element with a <code id=the-textarea-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element
     <dd><code id=the-textarea-element:attr-textarea-maxlength><a href=#attr-textarea-maxlength>maxlength</a></code> —  Maximum <a id=the-textarea-element:length href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of value
     <dd><code id=the-textarea-element:attr-textarea-minlength><a href=#attr-textarea-minlength>minlength</a></code> —  Minimum <a id=the-textarea-element:length-2 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of value
     <dd><code id=the-textarea-element:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> —  Name of the element to use for <a id=the-textarea-element:form-submission-2-2 href=form-control-infrastructure.html#form-submission-2>form submission</a> and in the <code id=the-textarea-element:dom-form-elements><a href=forms.html#dom-form-elements>form.elements</a></code> API 
     <dd><code id=the-textarea-element:attr-textarea-placeholder><a href=#attr-textarea-placeholder>placeholder</a></code> —  User-visible label to be placed within the form control
     <dd><code id=the-textarea-element:attr-textarea-readonly><a href=#attr-textarea-readonly>readonly</a></code> —  Whether to allow the value to be edited by the user
     <dd><code id=the-textarea-element:attr-textarea-required><a href=#attr-textarea-required>required</a></code> —  Whether the control is required for <a id=the-textarea-element:form-submission-2-3 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dd><code id=the-textarea-element:attr-textarea-rows><a href=#attr-textarea-rows>rows</a></code> —  Number of lines to show
     <dd><code id=the-textarea-element:attr-textarea-wrap><a href=#attr-textarea-wrap>wrap</a></code> —  How the value of the form control is to be wrapped for <a id=the-textarea-element:form-submission-2-4 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-textarea-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-textarea>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-textarea>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-textarea-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmltextareaelement' data-dfn-type='interface'><c- g>HTMLTextAreaElement</c-></dfn> : <a id='the-textarea-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-textarea-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-textarea-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-textarea-element:xattr-reflectsetter'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-fe-autocomplete' id='the-textarea-element:dom-fe-autocomplete'><c- g>autocomplete</c-></a>;
  [<a id='the-textarea-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectpositivewithfallback' id='the-textarea-element:xattr-reflectpositivewithfallback'><c- g>ReflectPositiveWithFallback</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectdefault' id='the-textarea-element:xattr-reflectdefault'>ReflectDefault=20</a>] <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <dfn data-dfn-for='HTMLTextAreaElement' id='dom-textarea-cols' data-dfn-type='attribute'><c- g>cols</c-></dfn>;
  [<a id='the-textarea-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-textarea-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLTextAreaElement' id='dom-textarea-dirname' data-dfn-type='attribute'><c- g>dirName</c-></dfn>;
  [<a id='the-textarea-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-textarea-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLTextAreaElement' id='dom-textarea-disabled' data-dfn-type='attribute'><c- g>disabled</c-></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-textarea-element:htmlformelement' href='forms.html#htmlformelement'><c- n>HTMLFormElement</c-></a>? <a href='form-control-infrastructure.html#dom-fae-form' id='the-textarea-element:dom-fae-form'><c- g>form</c-></a>;
  [<a id='the-textarea-element:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectnonnegative' id='the-textarea-element:xattr-reflectnonnegative'><c- g>ReflectNonNegative</c-></a>] <c- b>attribute</c-> <c- b>long</c-> <dfn data-dfn-for='HTMLTextAreaElement' id='dom-textarea-maxlength' data-dfn-type='attribute'><c- g>maxLength</c-></dfn>;
  [<a id='the-textarea-element:cereactions-6' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectnonnegative' id='the-textarea-element:xattr-reflectnonnegative-2'><c- g>ReflectNonNegative</c-></a>] <c- b>attribute</c-> <c- b>long</c-> <dfn data-dfn-for='HTMLTextAreaElement' id='dom-textarea-minlength' data-dfn-type='attribute'><c- g>minLength</c-></dfn>;
  [<a id='the-textarea-element:cereactions-7' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-textarea-element:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLTextAreaElement' id='dom-textarea-name' data-dfn-type='attribute'><c- g>name</c-></dfn>;
  [<a id='the-textarea-element:cereactions-8' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-textarea-element:xattr-reflect-4'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLTextAreaElement' id='dom-textarea-placeholder' data-dfn-type='attribute'><c- g>placeholder</c-></dfn>;
  [<a id='the-textarea-element:cereactions-9' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-textarea-element:xattr-reflect-5'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLTextAreaElement' id='dom-textarea-readonly' data-dfn-type='attribute'><c- g>readOnly</c-></dfn>;
  [<a id='the-textarea-element:cereactions-10' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-textarea-element:xattr-reflect-6'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLTextAreaElement' id='dom-textarea-required' data-dfn-type='attribute'><c- g>required</c-></dfn>;
  [<a id='the-textarea-element:cereactions-11' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectpositivewithfallback' id='the-textarea-element:xattr-reflectpositivewithfallback-2'><c- g>ReflectPositiveWithFallback</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectdefault' id='the-textarea-element:xattr-reflectdefault-2'>ReflectDefault=2</a>] <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <dfn data-dfn-for='HTMLTextAreaElement' id='dom-textarea-rows' data-dfn-type='attribute'><c- g>rows</c-></dfn>;
  [<a id='the-textarea-element:cereactions-12' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-textarea-element:xattr-reflect-7'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLTextAreaElement' id='dom-textarea-wrap' data-dfn-type='attribute'><c- g>wrap</c-></dfn>;

  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-textarea-type' id='the-textarea-element:dom-textarea-type'><c- g>type</c-></a>;
  [<a id='the-textarea-element:cereactions-13' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-textarea-defaultvalue' id='the-textarea-element:dom-textarea-defaultvalue'><c- g>defaultValue</c-></a>;
  <c- b>attribute</c-> [<a id='the-textarea-element:legacynulltoemptystring' href='https://webidl.spec.whatwg.org/#LegacyNullToEmptyString' data-x-internal='legacynulltoemptystring'><c- g>LegacyNullToEmptyString</c-></a>] <c- b>DOMString</c-> <a href='#dom-textarea-value' id='the-textarea-element:dom-textarea-value'><c- g>value</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-textarea-textlength' id='the-textarea-element:dom-textarea-textlength'><c- g>textLength</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-willvalidate' id='the-textarea-element:dom-cva-willvalidate'><c- g>willValidate</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-textarea-element:validitystate' href='form-control-infrastructure.html#validitystate'><c- n>ValidityState</c-></a> <a href='form-control-infrastructure.html#dom-cva-validity' id='the-textarea-element:dom-cva-validity'><c- g>validity</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-cva-validationmessage' id='the-textarea-element:dom-cva-validationmessage'><c- g>validationMessage</c-></a>;
  <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-checkvalidity' id='the-textarea-element:dom-cva-checkvalidity'><c- g>checkValidity</c-></a>();
  <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-reportvalidity' id='the-textarea-element:dom-cva-reportvalidity'><c- g>reportValidity</c-></a>();
  <c- b>undefined</c-> <a href='form-control-infrastructure.html#dom-cva-setcustomvalidity' id='the-textarea-element:dom-cva-setcustomvalidity'><c- g>setCustomValidity</c-></a>(<c- b>DOMString</c-> <c- g>error</c->);

  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-textarea-element:nodelist' href='https://dom.spec.whatwg.org/#interface-nodelist' data-x-internal='nodelist'><c- n>NodeList</c-></a> <a href='forms.html#dom-lfe-labels' id='the-textarea-element:dom-lfe-labels'><c- g>labels</c-></a>;

  <c- b>undefined</c-> <a href='form-control-infrastructure.html#dom-textarea/input-select' id='the-textarea-element:dom-textarea/input-select'><c- g>select</c-></a>();
  <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='form-control-infrastructure.html#dom-textarea/input-selectionstart' id='the-textarea-element:dom-textarea/input-selectionstart'><c- g>selectionStart</c-></a>;
  <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='form-control-infrastructure.html#dom-textarea/input-selectionend' id='the-textarea-element:dom-textarea/input-selectionend'><c- g>selectionEnd</c-></a>;
  <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-textarea/input-selectiondirection' id='the-textarea-element:dom-textarea/input-selectiondirection'><c- g>selectionDirection</c-></a>;
  <c- b>undefined</c-> <a href='form-control-infrastructure.html#dom-textarea/input-setrangetext' id='the-textarea-element:dom-textarea/input-setrangetext'><c- g>setRangeText</c-></a>(<c- b>DOMString</c-> <c- g>replacement</c->);
  <c- b>undefined</c-> <a href='form-control-infrastructure.html#dom-textarea/input-setrangetext' id='the-textarea-element:dom-textarea/input-setrangetext-2'><c- g>setRangeText</c-></a>(<c- b>DOMString</c-> <c- g>replacement</c->, <c- b>unsigned</c-> <c- b>long</c-> <c- g>start</c->, <c- b>unsigned</c-> <c- b>long</c-> <c- g>end</c->, <c- b>optional</c-> <a id='the-textarea-element:selectionmode' href='form-control-infrastructure.html#selectionmode'><c- n>SelectionMode</c-></a> <c- g>selectionMode</c-> = &quot;preserve&quot;);
  <c- b>undefined</c-> <a href='form-control-infrastructure.html#dom-textarea/input-setselectionrange' id='the-textarea-element:dom-textarea/input-setselectionrange'><c- g>setSelectionRange</c-></a>(<c- b>unsigned</c-> <c- b>long</c-> <c- g>start</c->, <c- b>unsigned</c-> <c- b>long</c-> <c- g>end</c->, <c- b>optional</c-> <c- b>DOMString</c-> <c- g>direction</c->);
};</code></pre>
   </dl>

  <p>The <code id=the-textarea-element:the-textarea-element><a href=#the-textarea-element>textarea</a></code> element <a id=the-textarea-element:represents href=dom.html#represents>represents</a> a multiline plain text edit
  control for the element's <dfn id=concept-textarea-raw-value>raw
  value</dfn>. The contents of the control represent the control's default value.</p>

  

  <p>The <a href=#concept-textarea-raw-value id=the-textarea-element:concept-textarea-raw-value>raw value</a> of a <code id=the-textarea-element:the-textarea-element-2><a href=#the-textarea-element>textarea</a></code>
  control must be initially the empty string.</p>

  <p class=note>This element <a href=dom.html#bidireq>has rendering requirements involving the
  bidirectional algorithm</a>.</p>

  

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-readonly data-dfn-type=element-attr><code>readonly</code></dfn> attribute is a <a id=the-textarea-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean
  attribute</a> used to control whether the text can be edited by the user or not.</p>

  <div class=example>

   <p>In this example, a text control is marked read-only because it represents a read-only
   file:</p>

   <pre><code class='html'>Filename: <c- p>&lt;</c-><c- f>code</c-><c- p>&gt;</c->/etc/bash.bashrc<c- p>&lt;/</c-><c- f>code</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>textarea</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;buffer&quot;</c-> <c- e>readonly</c-><c- p>&gt;</c->
# System-wide .bashrc file for interactive bash(1) shells.

# To enable the settings / commands in this file for login shells as well,
# this file has to be sourced in /etc/profile.

# If not running interactively, don&apos;t do anything
[ -z &quot;$PS1&quot; ] <c- ni>&amp;amp;&amp;amp;</c-> return

...<c- p>&lt;/</c-><c- f>textarea</c-><c- p>&gt;</c-></code></pre>

  </div>

  

  <p><strong>Constraint validation</strong>: If the <code id=the-textarea-element:attr-textarea-readonly-2><a href=#attr-textarea-readonly>readonly</a></code> attribute is specified on a <code id=the-textarea-element:the-textarea-element-3><a href=#the-textarea-element>textarea</a></code>
  element, the element is <a id=the-textarea-element:barred-from-constraint-validation href=form-control-infrastructure.html#barred-from-constraint-validation>barred from constraint validation</a>.</p>

  <p>A <code id=the-textarea-element:the-textarea-element-4><a href=#the-textarea-element>textarea</a></code> element is <a href=form-control-infrastructure.html#concept-fe-mutable id=the-textarea-element:concept-fe-mutable>mutable</a> if it is
  neither <a href=form-control-infrastructure.html#concept-fe-disabled id=the-textarea-element:concept-fe-disabled>disabled</a> nor has a <code id=the-textarea-element:attr-textarea-readonly-3><a href=#attr-textarea-readonly>readonly</a></code> attribute specified.</p>

  <p>When a <code id=the-textarea-element:the-textarea-element-5><a href=#the-textarea-element>textarea</a></code> is <a href=form-control-infrastructure.html#concept-fe-mutable id=the-textarea-element:concept-fe-mutable-2>mutable</a>, its <a href=#concept-textarea-raw-value id=the-textarea-element:concept-textarea-raw-value-2>raw value</a> should be editable by the user: the user
  agent should allow the user to edit, insert, and remove text, and to insert and remove line breaks
  in the form of U+000A LINE FEED (LF) characters. Any time the user causes the element's <a href=#concept-textarea-raw-value id=the-textarea-element:concept-textarea-raw-value-3>raw value</a> to change, the user agent must <a id=the-textarea-element:queue-an-element-task href=webappapis.html#queue-an-element-task>queue an
  element task</a> on the <a id=the-textarea-element:user-interaction-task-source href=webappapis.html#user-interaction-task-source>user interaction task source</a> given the
  <code id=the-textarea-element:the-textarea-element-6><a href=#the-textarea-element>textarea</a></code> element to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-textarea-element:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named
  <code id=the-textarea-element:event-input><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> at the <code id=the-textarea-element:the-textarea-element-7><a href=#the-textarea-element>textarea</a></code> element, with the <code id=the-textarea-element:dom-event-bubbles><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> and <code id=the-textarea-element:dom-event-composed><a data-x-internal=dom-event-composed href=https://dom.spec.whatwg.org/#dom-event-composed>composed</a></code>
  attributes initialized to true. User agents may wait for a suitable break in the user's
  interaction before queuing the task; for example, a user agent could wait for the user to have not
  hit a key for 100ms, so as to only fire the event when the user pauses, instead of continuously
  for each keystroke.</p>
  

  <p>A <code id=the-textarea-element:the-textarea-element-8><a href=#the-textarea-element>textarea</a></code> element's <a href=form-control-infrastructure.html#concept-fe-dirty id=the-textarea-element:concept-fe-dirty>dirty value flag</a> must
  be set to true whenever the user interacts with the control in a way that changes the <a href=#concept-textarea-raw-value id=the-textarea-element:concept-textarea-raw-value-4>raw value</a>.</p>

  <p>The <a href=https://dom.spec.whatwg.org/#concept-node-clone-ext id=the-textarea-element:concept-node-clone-ext data-x-internal=concept-node-clone-ext>cloning steps</a> for <code id=the-textarea-element:the-textarea-element-9><a href=#the-textarea-element>textarea</a></code>
  elements given <var>node</var>, <var>copy</var>, and <var>subtree</var> are to propagate the <a href=#concept-textarea-raw-value id=the-textarea-element:concept-textarea-raw-value-5>raw value</a> and <a href=form-control-infrastructure.html#concept-fe-dirty id=the-textarea-element:concept-fe-dirty-2>dirty
  value flag</a> from <var>node</var> to <var>copy</var>.</p>

  <p>The <a id=the-textarea-element:children-changed-steps href=https://dom.spec.whatwg.org/#concept-node-children-changed-ext data-x-internal=children-changed-steps>children changed steps</a> for <code id=the-textarea-element:the-textarea-element-10><a href=#the-textarea-element>textarea</a></code> elements must, if the
  element's <a href=form-control-infrastructure.html#concept-fe-dirty id=the-textarea-element:concept-fe-dirty-3>dirty value flag</a> is false, set the element's
  <a href=#concept-textarea-raw-value id=the-textarea-element:concept-textarea-raw-value-6>raw value</a> to its <a id=the-textarea-element:child-text-content href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text
  content</a>.</p>

  <p>The <a href=form-control-infrastructure.html#concept-form-reset-control id=the-textarea-element:concept-form-reset-control>reset algorithm</a> for <code id=the-textarea-element:the-textarea-element-11><a href=#the-textarea-element>textarea</a></code>
  elements is to set the <a id=the-textarea-element:user-validity href=form-control-infrastructure.html#user-validity>user validity</a> to false, the <a href=form-control-infrastructure.html#concept-fe-dirty id=the-textarea-element:concept-fe-dirty-4>dirty value flag</a> back to false, and the <a href=#concept-textarea-raw-value id=the-textarea-element:concept-textarea-raw-value-7>raw value</a> to its <a id=the-textarea-element:child-text-content-2 href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text
  content</a>.</p>

  <p>When a <code id=the-textarea-element:the-textarea-element-12><a href=#the-textarea-element>textarea</a></code> element is popped off the <a id=the-textarea-element:stack-of-open-elements href=parsing.html#stack-of-open-elements>stack of open elements</a> of
  an <a id=the-textarea-element:html-parser href=parsing.html#html-parser>HTML parser</a> or <a id=the-textarea-element:xml-parser href=xhtml.html#xml-parser>XML parser</a>, then the user agent must invoke the
  element's <a href=form-control-infrastructure.html#concept-form-reset-control id=the-textarea-element:concept-form-reset-control-2>reset algorithm</a>.</p>

  
  
  <p>If the element is <a href=form-control-infrastructure.html#concept-fe-mutable id=the-textarea-element:concept-fe-mutable-3>mutable</a>, the user agent should allow
  the user to change the writing direction of the element, setting it either to a left-to-right
  writing direction or a right-to-left writing direction. If the user does so, the user agent must
  then run the following steps:</p>

  <ol><li><p>Set the element's <code id=the-textarea-element:attr-dir><a href=dom.html#attr-dir>dir</a></code> attribute to "<code id=the-textarea-element:attr-dir-ltr><a href=dom.html#attr-dir-ltr>ltr</a></code>" if the user selected a left-to-right writing direction, and
   "<code id=the-textarea-element:attr-dir-rtl><a href=dom.html#attr-dir-rtl>rtl</a></code>" if the user selected a right-to-left writing
   direction.<li><p><a id=the-textarea-element:queue-an-element-task-2 href=webappapis.html#queue-an-element-task>Queue an element task</a> on the <a id=the-textarea-element:user-interaction-task-source-2 href=webappapis.html#user-interaction-task-source>user interaction task source</a> given
   the <code id=the-textarea-element:the-textarea-element-13><a href=#the-textarea-element>textarea</a></code> element to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-textarea-element:concept-event-fire-2 data-x-internal=concept-event-fire>fire an event</a> named
   <code id=the-textarea-element:event-input-2><a data-x-internal=event-input href=https://w3c.github.io/uievents/#event-type-input>input</a></code> at the <code id=the-textarea-element:the-textarea-element-14><a href=#the-textarea-element>textarea</a></code> element, with the <code id=the-textarea-element:dom-event-bubbles-2><a data-x-internal=dom-event-bubbles href=https://dom.spec.whatwg.org/#dom-event-bubbles>bubbles</a></code> and <code id=the-textarea-element:dom-event-composed-2><a data-x-internal=dom-event-composed href=https://dom.spec.whatwg.org/#dom-event-composed>composed</a></code>
   attributes initialized to true.</ol>

  

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-cols data-dfn-type=element-attr><code>cols</code></dfn>
  attribute specifies the expected maximum number of characters per line. If the <code id=the-textarea-element:attr-textarea-cols-2><a href=#attr-textarea-cols>cols</a></code> attribute is specified, its value must be a <a id=the-textarea-element:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid
  non-negative integer</a> greater than zero. If applying the <a id=the-textarea-element:rules-for-parsing-non-negative-integers href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for
  parsing non-negative integers</a> to the attribute's value results in a number greater than
  zero, then the element's <dfn id=attr-textarea-cols-value>character width</dfn> is that
  value; otherwise, it is 20.</p>

  

  <p>The user agent may use the <code id=the-textarea-element:the-textarea-element-15><a href=#the-textarea-element>textarea</a></code> element's <a href=#attr-textarea-cols-value id=the-textarea-element:attr-textarea-cols-value>character width</a> as a hint to the user as to how many
  characters the server prefers per line (e.g. for visual user agents by making the width of the
  control be that many characters). In visual renderings, the user agent should wrap the user's
  input in the rendering so that each line is no wider than this number of characters.</p>

  

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-rows data-dfn-type=element-attr><code>rows</code></dfn>
  attribute specifies the number of lines to show. If the <code id=the-textarea-element:attr-textarea-rows-2><a href=#attr-textarea-rows>rows</a></code> attribute is specified, its value must be a <a id=the-textarea-element:valid-non-negative-integer-2 href=common-microsyntaxes.html#valid-non-negative-integer>valid
  non-negative integer</a> greater than zero. If applying the <a id=the-textarea-element:rules-for-parsing-non-negative-integers-2 href=common-microsyntaxes.html#rules-for-parsing-non-negative-integers>rules for
  parsing non-negative integers</a> to the attribute's value results in a number greater than
  zero, then the element's <dfn id=attr-textarea-rows-value>character height</dfn> is that
  value; otherwise, it is 2.</p>

  

  <p>Visual user agents should set the height of the control to the number of lines given by <a href=#attr-textarea-rows-value id=the-textarea-element:attr-textarea-rows-value>character height</a>.</p>

  

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-wrap data-dfn-type=element-attr><code>wrap</code></dfn>
  attribute is an <a id=the-textarea-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=textarea/wrap id=attr-textarea-wrap-soft data-dfn-type=attr-value><code>soft</code></dfn>
     <td><dfn id=attr-textarea-wrap-soft-state>Soft</dfn>
     <td>Text is not to be wrapped when submitted (though can still be wrapped in the rendering).
    <tr><td><dfn data-dfn-for=textarea/wrap id=attr-textarea-wrap-hard data-dfn-type=attr-value><code>hard</code></dfn>
     <td><dfn id=attr-textarea-wrap-hard-state>Hard</dfn>
     <td>Text is to have newlines added by the user agent so that the text is wrapped when it is
     submitted.
  </table>

  <p>The attribute's <i id=the-textarea-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> and <i id=the-textarea-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> are both the <a href=#attr-textarea-wrap-soft-state id=the-textarea-element:attr-textarea-wrap-soft-state>Soft</a> state.</p>

  <p>If the element's <code id=the-textarea-element:attr-textarea-wrap-2><a href=#attr-textarea-wrap>wrap</a></code> attribute is in the <a href=#attr-textarea-wrap-hard-state id=the-textarea-element:attr-textarea-wrap-hard-state>Hard</a> state, the <code id=the-textarea-element:attr-textarea-cols-3><a href=#attr-textarea-cols>cols</a></code> attribute must be specified.</p>

  

  

  <p>For historical reasons, the element's value is normalized in three different ways for three
  different purposes. The <a href=#concept-textarea-raw-value id=the-textarea-element:concept-textarea-raw-value-8>raw value</a> is the value as
  it was originally set. It is not normalized. The <a href=form-control-infrastructure.html#concept-fe-api-value id=the-textarea-element:concept-fe-api-value>API
  value</a> is the value used in the <code id=the-textarea-element:dom-textarea-value-2><a href=#dom-textarea-value>value</a></code> IDL
  attribute, <code id=the-textarea-element:dom-textarea-textlength-2><a href=#dom-textarea-textlength>textLength</a></code> IDL attribute, and by the
  <code id=the-textarea-element:attr-fe-maxlength><a href=form-control-infrastructure.html#attr-fe-maxlength>maxlength</a></code> and <code id=the-textarea-element:attr-fe-minlength><a href=form-control-infrastructure.html#attr-fe-minlength>minlength</a></code> content attributes. It is normalized so that line
  breaks use U+000A LINE FEED (LF) characters. Finally, there is the <a href=form-control-infrastructure.html#concept-fe-value id=the-textarea-element:concept-fe-value>value</a>, as used in form submission and other processing models in
  this specification. It is normalized as for the <a href=form-control-infrastructure.html#concept-fe-api-value id=the-textarea-element:concept-fe-api-value-2>API
  value</a>, and in addition, if necessary given the element's <code id=the-textarea-element:attr-textarea-wrap-3><a href=#attr-textarea-wrap>wrap</a></code> attribute, additional line breaks are inserted to wrap the
  text at the given width.</p>

  <p id=textarea-line-break-normalisation-transformation>The algorithm for obtaining
  the element's <a href=form-control-infrastructure.html#concept-fe-api-value id=the-textarea-element:concept-fe-api-value-3>API value</a> is to return the element's
  <a href=#concept-textarea-raw-value id=the-textarea-element:concept-textarea-raw-value-9>raw value</a>, with <a href=https://infra.spec.whatwg.org/#normalize-newlines id=the-textarea-element:normalize-newlines data-x-internal=normalize-newlines>newlines normalized</a>.</p>

  <p>The element's <a href=form-control-infrastructure.html#concept-fe-value id=the-textarea-element:concept-fe-value-2>value</a> is defined to be the element's <a href=#concept-textarea-raw-value id=the-textarea-element:concept-textarea-raw-value-10>API value</a> with the <a href=#textarea-wrapping-transformation id=the-textarea-element:textarea-wrapping-transformation>textarea wrapping
  transformation</a> applied. The <dfn id=textarea-wrapping-transformation>textarea wrapping transformation</dfn> is the following
  algorithm, as applied to a string:</p>

  <ol><li><p>If the element's <code id=the-textarea-element:attr-textarea-wrap-4><a href=#attr-textarea-wrap>wrap</a></code> attribute is in the <a href=#attr-textarea-wrap-hard-state id=the-textarea-element:attr-textarea-wrap-hard-state-2>Hard</a> state, insert U+000A LINE FEED (LF) characters
   into the string using an <a id=the-textarea-element:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> algorithm so that each line has no
   more than <a href=#attr-textarea-cols-value id=the-textarea-element:attr-textarea-cols-value-2>character width</a> characters. For the
   purposes of this requirement, lines are delimited by the start of the string, the end of the
   string, and U+000A LINE FEED (LF) characters.</ol>

  

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-maxlength data-dfn-type=element-attr><code>maxlength</code></dfn> attribute is a <a href=form-control-infrastructure.html#attr-fe-maxlength id=the-textarea-element:attr-fe-maxlength-2>form control <code>maxlength</code> attribute</a>.</p>

  <p>If the <code id=the-textarea-element:the-textarea-element-16><a href=#the-textarea-element>textarea</a></code> element has a <a id=the-textarea-element:maximum-allowed-value-length href=form-control-infrastructure.html#maximum-allowed-value-length>maximum allowed value length</a>, then the
  element's children must be such that the <a id=the-textarea-element:length-3 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the value of the element's
  <a id=the-textarea-element:descendant-text-content href=https://dom.spec.whatwg.org/#concept-descendant-text-content data-x-internal=descendant-text-content>descendant text content</a> with <a href=https://infra.spec.whatwg.org/#normalize-newlines id=the-textarea-element:normalize-newlines-2 data-x-internal=normalize-newlines>newlines
  normalized</a> is less than or equal to the element's <a id=the-textarea-element:maximum-allowed-value-length-2 href=form-control-infrastructure.html#maximum-allowed-value-length>maximum allowed value
  length</a>.</p>

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-minlength data-dfn-type=element-attr><code>minlength</code></dfn> attribute is a <a href=form-control-infrastructure.html#attr-fe-minlength id=the-textarea-element:attr-fe-minlength-2>form control <code>minlength</code> attribute</a>.</p>

  

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-required data-dfn-type=element-attr><code>required</code></dfn> attribute is a <a id=the-textarea-element:boolean-attribute-2 href=common-microsyntaxes.html#boolean-attribute>boolean
  attribute</a>. When specified, the user will be required to enter a value before submitting the
  form.</p>

  

  <p><strong>Constraint validation</strong>: If the element has its <code id=the-textarea-element:attr-textarea-required-2><a href=#attr-textarea-required>required</a></code> attribute specified, and the element is <a href=form-control-infrastructure.html#concept-fe-mutable id=the-textarea-element:concept-fe-mutable-4>mutable</a>, and the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-textarea-element:concept-fe-value-3>value</a> is the empty string, then the element is <a id=the-textarea-element:suffering-from-being-missing href=form-control-infrastructure.html#suffering-from-being-missing>suffering
  from being missing</a>.</p>

  


  

  <p>The <dfn data-dfn-for=textarea id=attr-textarea-placeholder data-dfn-type=element-attr><code>placeholder</code></dfn> attribute represents a <em>short</em>
  hint (a word or short phrase) intended to aid the user with data entry when the control has no
  value. A hint could be a sample value or a brief description of the expected format.</p>

  <p>The <code id=the-textarea-element:attr-textarea-placeholder-2><a href=#attr-textarea-placeholder>placeholder</a></code> attribute should not be used as
  an alternative to a <code id=the-textarea-element:the-label-element><a href=forms.html#the-label-element>label</a></code>. For a longer hint or other advisory text, the <code id=the-textarea-element:attr-title><a href=dom.html#attr-title>title</a></code> attribute is more appropriate.</p>

  <p class=note>These mechanisms are very similar but subtly different: the hint given by the
  control's <code id=the-textarea-element:the-label-element-2><a href=forms.html#the-label-element>label</a></code> is shown at all times; the short hint given in the <code id=the-textarea-element:attr-textarea-placeholder-3><a href=#attr-textarea-placeholder>placeholder</a></code> attribute is shown before the user enters a
  value; and the hint in the <code id=the-textarea-element:attr-title-2><a href=dom.html#attr-title>title</a></code> attribute is shown when the user
  requests further help.</p>

  

  <p>User agents should present this hint to the user when the element's <a href=form-control-infrastructure.html#concept-fe-value id=the-textarea-element:concept-fe-value-4>value</a> is the empty string and the control is not
  <a id=the-textarea-element:focused href=interaction.html#focused>focused</a> (e.g. by displaying it inside a blank unfocused control). All U+000D CARRIAGE
  RETURN U+000A LINE FEED character pairs (CRLF) in the hint, as well as all other U+000D CARRIAGE
  RETURN (CR) and U+000A LINE FEED (LF) characters in the hint, must be treated as line breaks when
  rendering the hint.</p>

  <p>If a user agent normally doesn't show this hint to the user when the control is
  <a id=the-textarea-element:focused-2 href=interaction.html#focused>focused</a>, then the user agent should nonetheless show the hint for the control if it
  was focused as a result of the <code id=the-textarea-element:attr-fe-autofocus><a href=interaction.html#attr-fe-autofocus>autofocus</a></code> attribute, since
  in that case the user will not have had an opportunity to examine the control before focusing
  it.</p>

  

  <p>
  The <code id=the-textarea-element:attr-fe-name-2><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute represents the element's name.
  The <code id=the-textarea-element:attr-fe-dirname-2><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code> attribute controls how the element's <a href=dom.html#the-directionality id=the-textarea-element:the-directionality-2>directionality</a> is submitted.
  The <code id=the-textarea-element:attr-fe-disabled-2><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code> attribute is used to make the control
  non-interactive and to prevent its value from being submitted.
  The <code id=the-textarea-element:attr-fae-form-2><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> attribute is used to explicitly associate the
  <code id=the-textarea-element:the-textarea-element-17><a href=#the-textarea-element>textarea</a></code> element with its <a id=the-textarea-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>.
  The <code id=the-textarea-element:attr-fe-autocomplete-2><a href=form-control-infrastructure.html#attr-fe-autocomplete>autocomplete</a></code> attribute controls how the user agent
  provides autofill behavior.
  </p>

  <dl class=domintro><dt><code><var>textarea</var>.<a href=#dom-textarea-type id=dom-textarea-type-dev>type</a></code><dd><p>Returns the string "<code>textarea</code>".<dt><code><var>textarea</var>.<a href=#dom-textarea-value id=dom-textarea-value-dev>value</a></code><dd>
    <p>Returns the current value of the element.</p>

    <p>Can be set, to change the value.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLTextAreaElement id=dom-textarea-type data-dfn-type=attribute><code>type</code></dfn>
  IDL attribute must return the value "<code>textarea</code>".</p>

  <p>The <dfn data-dfn-for=HTMLTextAreaElement id=dom-textarea-defaultvalue data-dfn-type=attribute><code>defaultValue</code></dfn> attribute's getter must return the
  element's <a id=the-textarea-element:child-text-content-3 href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a>.

  <p>The <code id=the-textarea-element:dom-textarea-defaultvalue-2><a href=#dom-textarea-defaultvalue>defaultValue</a></code> attribute's setter must
  <a id=the-textarea-element:string-replace-all href=https://dom.spec.whatwg.org/#string-replace-all data-x-internal=string-replace-all>string replace all</a> with the given value within this element.</p>

  <p>The <dfn data-dfn-for=HTMLTextAreaElement id=dom-textarea-value data-dfn-type=attribute><code>value</code></dfn> IDL attribute must, on getting, return the
  element's <a href=form-control-infrastructure.html#concept-fe-api-value id=the-textarea-element:concept-fe-api-value-4>API value</a>. On setting, it must perform the
  following steps:</p>

  <ol><li><p>Let <var>oldAPIValue</var> be this element's <a href=form-control-infrastructure.html#concept-fe-api-value id=the-textarea-element:concept-fe-api-value-5>API value</a>.<li><p>Set this element's <a href=#concept-textarea-raw-value id=the-textarea-element:concept-textarea-raw-value-11>raw value</a> to the new
   value.<li><p>Set this element's <a href=form-control-infrastructure.html#concept-fe-dirty id=the-textarea-element:concept-fe-dirty-5>dirty value flag</a> to
   true.<li><p>If the new <a href=form-control-infrastructure.html#concept-fe-api-value id=the-textarea-element:concept-fe-api-value-6>API value</a> is different from
   <var>oldAPIValue</var>, then move the <a href=form-control-infrastructure.html#concept-textarea/input-cursor id=the-textarea-element:concept-textarea/input-cursor>text entry
   cursor position</a> to the end of the text control, unselecting any selected text and <a href=form-control-infrastructure.html#set-the-selection-direction id=the-textarea-element:set-the-selection-direction>resetting the selection direction</a> to "<code>none</code>".</ol>

  <p>The <dfn data-dfn-for=HTMLTextAreaElement id=dom-textarea-textlength data-dfn-type=attribute><code>textLength</code></dfn> IDL attribute must return the
  <a id=the-textarea-element:length-4 href=https://infra.spec.whatwg.org/#string-length data-x-internal=length>length</a> of the element's <a href=form-control-infrastructure.html#concept-fe-api-value id=the-textarea-element:concept-fe-api-value-7>API value</a>.</p>

  <p>The <code id=the-textarea-element:dom-cva-willvalidate-2><a href=form-control-infrastructure.html#dom-cva-willvalidate>willValidate</a></code>, <code id=the-textarea-element:dom-cva-validity-2><a href=form-control-infrastructure.html#dom-cva-validity>validity</a></code>, and <code id=the-textarea-element:dom-cva-validationmessage-2><a href=form-control-infrastructure.html#dom-cva-validationmessage>validationMessage</a></code> IDL attributes, and the <code id=the-textarea-element:dom-cva-checkvalidity-2><a href=form-control-infrastructure.html#dom-cva-checkvalidity>checkValidity()</a></code>, <code id=the-textarea-element:dom-cva-reportvalidity-2><a href=form-control-infrastructure.html#dom-cva-reportvalidity>reportValidity()</a></code>, and <code id=the-textarea-element:dom-cva-setcustomvalidity-2><a href=form-control-infrastructure.html#dom-cva-setcustomvalidity>setCustomValidity()</a></code> methods, are part of the
  <a id=the-textarea-element:the-constraint-validation-api href=form-control-infrastructure.html#the-constraint-validation-api>constraint validation API</a>. The <code id=the-textarea-element:dom-lfe-labels-2><a href=forms.html#dom-lfe-labels>labels</a></code> IDL
  attribute provides a list of the element's <code id=the-textarea-element:the-label-element-3><a href=forms.html#the-label-element>label</a></code>s. The <code id=the-textarea-element:dom-textarea/input-select-2><a href=form-control-infrastructure.html#dom-textarea/input-select>select()</a></code>, <code id=the-textarea-element:dom-textarea/input-selectionstart-2><a href=form-control-infrastructure.html#dom-textarea/input-selectionstart>selectionStart</a></code>, <code id=the-textarea-element:dom-textarea/input-selectionend-2><a href=form-control-infrastructure.html#dom-textarea/input-selectionend>selectionEnd</a></code>, <code id=the-textarea-element:dom-textarea/input-selectiondirection-2><a href=form-control-infrastructure.html#dom-textarea/input-selectiondirection>selectionDirection</a></code>, <code id=the-textarea-element:dom-textarea/input-setrangetext-3><a href=form-control-infrastructure.html#dom-textarea/input-setrangetext>setRangeText()</a></code>, and <code id=the-textarea-element:dom-textarea/input-setselectionrange-2><a href=form-control-infrastructure.html#dom-textarea/input-setselectionrange>setSelectionRange()</a></code> methods and IDL
  attributes expose the element's text selection. The <code id=the-textarea-element:dom-textarea-disabled><a href=#dom-textarea-disabled>disabled</a></code>, <code id=the-textarea-element:dom-fae-form-2><a href=form-control-infrastructure.html#dom-fae-form>form</a></code>, and <code id=the-textarea-element:dom-textarea-name><a href=#dom-textarea-name>name</a></code> IDL attributes are part of the element's forms API.</p>

  

  <div class=example>

   <p>Here is an example of a <code id=the-textarea-element:the-textarea-element-18><a href=#the-textarea-element>textarea</a></code> being used for unrestricted free-form text input
   in a form:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->If you have any comments, please let us know: <c- p>&lt;</c-><c- f>textarea</c-> <c- e>cols</c-><c- o>=</c-><c- s>80</c-> <c- e>name</c-><c- o>=</c-><c- s>comments</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>To specify a maximum length for the comments, one can use the <code id=the-textarea-element:attr-textarea-maxlength-2><a href=#attr-textarea-maxlength>maxlength</a></code> attribute:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->If you have any short comments, please let us know: <c- p>&lt;</c-><c- f>textarea</c-> <c- e>cols</c-><c- o>=</c-><c- s>80</c-> <c- e>name</c-><c- o>=</c-><c- s>comments</c-> <c- e>maxlength</c-><c- o>=</c-><c- s>200</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>To give a default value, text can be included inside the element:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->If you have any comments, please let us know: <c- p>&lt;</c-><c- f>textarea</c-> <c- e>cols</c-><c- o>=</c-><c- s>80</c-> <c- e>name</c-><c- o>=</c-><c- s>comments</c-><c- p>&gt;</c->You rock!<c- p>&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

   <p>You can also give a minimum length. Here, a letter needs to be filled out by the user; a
   template (which is shorter than the minimum length) is provided, but is insufficient to submit
   the form:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>textarea</c-> <c- e>required</c-> <c- e>minlength</c-><c- o>=</c-><c- s>&quot;500&quot;</c-><c- p>&gt;</c->Dear Madam Speaker,

Regarding your letter dated ...

...

Yours Sincerely,

...<c- p>&lt;/</c-><c- f>textarea</c-><c- p>&gt;</c-></code></pre>

   <p>A placeholder can be given as well, to suggest the basic form to the user, without providing
   an explicit template:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>textarea</c-> <c- e>placeholder</c-><c- o>=</c-><c- s>&quot;Dear Francine,</c->

<c- s>They closed the parks this week, so we won&apos;t be able to</c->
<c- s>meet your there. Should we just have dinner?</c->

<c- s>Love,</c->
<c- s>Daddy&quot;</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;</c-></code></pre>

   <p>To have the browser submit <a id=the-textarea-element:the-directionality-3 href=dom.html#the-directionality>the directionality</a> of the element along with the
   value, the <code id=the-textarea-element:attr-fe-dirname-3><a href=form-control-infrastructure.html#attr-fe-dirname>dirname</a></code> attribute can be specified:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->If you have any comments, please let us know (you may use either English or Hebrew for your comments):
<c- p>&lt;</c-><c- f>textarea</c-> <c- e>cols</c-><c- o>=</c-><c- s>80</c-> <c- e>name</c-><c- o>=</c-><c- s>comments</c-> <c- e>dirname</c-><c- o>=</c-><c- s>comments.dir</c-><c- p>&gt;&lt;/</c-><c- f>textarea</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=the-output-element><span class=secno>4.10.12</span> The <dfn data-dfn-type=element><code>output</code></dfn> element<a href=#the-output-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output title="The <output> HTML element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.">Element/output</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLOutputElement title="The HTMLOutputElement interface provides properties and methods (beyond those inherited from HTMLElement) for manipulating the layout and presentation of <output> elements.">HTMLOutputElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>5.1+</span></span><span class="chrome yes"><span>Chrome</span><span>9+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>14+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>3+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-output-element:concept-element-categories>Categories</a>:<dd><a id=the-output-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-output-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a href=forms.html#category-listed id=the-output-element:category-listed>Listed</a>, <a href=forms.html#category-label id=the-output-element:category-label>labelable</a>, <a href=forms.html#category-reset id=the-output-element:category-reset>resettable</a>, and <a href=forms.html#category-autocapitalize id=the-output-element:category-autocapitalize>autocapitalize-and-autocorrect inheriting</a> <a id=the-output-element:form-associated-element href=forms.html#form-associated-element>form-associated element</a>.<dd><a id=the-output-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-output-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-output-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-output-element:concept-element-content-model>Content model</a>:<dd><a id=the-output-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-output-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-output-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-output-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-output-element:attr-output-for><a href=#attr-output-for>for</a></code> —  Specifies controls from which the output was calculated
     <dd><code id=the-output-element:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> —  Associates the element with a <code id=the-output-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element
     <dd><code id=the-output-element:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code>   — Name of the element to use in the <code id=the-output-element:dom-form-elements><a href=forms.html#dom-form-elements>form.elements</a></code> API.<dt><a href=dom.html#concept-element-accessibility-considerations id=the-output-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-output>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-output>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-output-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmloutputelement' data-dfn-type='interface'><c- g>HTMLOutputElement</c-></dfn> : <a id='the-output-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-output-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<c- g>SameObject</c->, <c- g>PutForwards</c->=<a href='https://dom.spec.whatwg.org/#dom-domtokenlist-value' id='the-output-element:dom-domtokenlist-value' data-x-internal='dom-domtokenlist-value'><c- n>value</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-output-element:xattr-reflect'>Reflect</a>=&quot;<a href='#attr-output-for' id='the-output-element:attr-output-for-2'>for</a>&quot;] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-output-element:domtokenlist' href='https://dom.spec.whatwg.org/#interface-domtokenlist' data-x-internal='domtokenlist'><c- n>DOMTokenList</c-></a> <dfn data-dfn-for='HTMLOutputElement' id='dom-output-htmlfor' data-dfn-type='attribute'><c- g>htmlFor</c-></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-output-element:htmlformelement' href='forms.html#htmlformelement'><c- n>HTMLFormElement</c-></a>? <a href='form-control-infrastructure.html#dom-fae-form' id='the-output-element:dom-fae-form'><c- g>form</c-></a>;
  [<a id='the-output-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-output-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLOutputElement' id='dom-output-name' data-dfn-type='attribute'><c- g>name</c-></dfn>;

  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-output-type' id='the-output-element:dom-output-type'><c- g>type</c-></a>;
  [<a id='the-output-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-output-defaultvalue' id='the-output-element:dom-output-defaultvalue'><c- g>defaultValue</c-></a>;
  [<a id='the-output-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-output-value' id='the-output-element:dom-output-value'><c- g>value</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-willvalidate' id='the-output-element:dom-cva-willvalidate'><c- g>willValidate</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-output-element:validitystate' href='form-control-infrastructure.html#validitystate'><c- n>ValidityState</c-></a> <a href='form-control-infrastructure.html#dom-cva-validity' id='the-output-element:dom-cva-validity'><c- g>validity</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-cva-validationmessage' id='the-output-element:dom-cva-validationmessage'><c- g>validationMessage</c-></a>;
  <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-checkvalidity' id='the-output-element:dom-cva-checkvalidity'><c- g>checkValidity</c-></a>();
  <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-reportvalidity' id='the-output-element:dom-cva-reportvalidity'><c- g>reportValidity</c-></a>();
  <c- b>undefined</c-> <a href='form-control-infrastructure.html#dom-cva-setcustomvalidity' id='the-output-element:dom-cva-setcustomvalidity'><c- g>setCustomValidity</c-></a>(<c- b>DOMString</c-> <c- g>error</c->);

  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-output-element:nodelist' href='https://dom.spec.whatwg.org/#interface-nodelist' data-x-internal='nodelist'><c- n>NodeList</c-></a> <a href='forms.html#dom-lfe-labels' id='the-output-element:dom-lfe-labels'><c- g>labels</c-></a>;
};</code></pre>
   </dl>

  <p>The <code id=the-output-element:the-output-element><a href=#the-output-element>output</a></code> element <a id=the-output-element:represents href=dom.html#represents>represents</a> the result of a calculation performed
  by the application, or the result of a user action.</p>

  <p class=note>This element can be contrasted with the <code id=the-output-element:the-samp-element><a href=text-level-semantics.html#the-samp-element>samp</a></code> element, which is the
  appropriate element for quoting the output of other programs run previously.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for title="The for attribute is an allowed attribute for <label> and <output>. When used on a <label> element it indicates the form element that this label describes. When used on an <output> element it allows for an explicit relationship between the elements that represent values which are used in the output.">Attributes/for</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>7+</span></span><span class="chrome yes"><span>Chrome</span><span>10+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><p>The <dfn data-dfn-for=output id=attr-output-for data-dfn-type=element-attr><code>for</code></dfn> content
  attribute allows an explicit relationship to be made between the result of a calculation and the
  elements that represent the values that went into the calculation or that otherwise influenced the
  calculation. The <code id=the-output-element:attr-output-for-3><a href=#attr-output-for>for</a></code> attribute, if specified, must contain a
  string consisting of an <a id=the-output-element:unordered-set-of-unique-space-separated-tokens href=common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens>unordered set of unique space-separated tokens</a>, none of which
  are <a id=the-output-element:identical-to href=https://infra.spec.whatwg.org/#string-is data-x-internal=identical-to>identical to</a> another token and each of which must have the value of an <a href=https://dom.spec.whatwg.org/#concept-id id=the-output-element:concept-id data-x-internal=concept-id>ID</a> of an element in the same <a id=the-output-element:tree href=https://dom.spec.whatwg.org/#concept-tree data-x-internal=tree>tree</a>.</p>

  <p>The <code id=the-output-element:attr-fae-form-2><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> attribute is used to explicitly associate the
  <code id=the-output-element:the-output-element-2><a href=#the-output-element>output</a></code> element with its <a id=the-output-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>. The <code id=the-output-element:attr-fe-name-2><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute represents the element's name. The <code id=the-output-element:the-output-element-3><a href=#the-output-element>output</a></code>
  element is associated with a form so that it can be easily <a id=the-output-element:referenced href=dom.html#referenced>referenced</a> from the event
  handlers of form controls; the element's value itself is not submitted when the form is
  submitted.</p>

  

  <p>The element has a <dfn id=concept-output-default-value-override>default value
  override</dfn> (null or a string). Initially it must be null.</p>

  <p>The element's <dfn id=concept-output-default-value>default value</dfn> is determined by
  the following steps:</p>

  <ol><li><p>If this element's <a href=#concept-output-default-value-override id=the-output-element:concept-output-default-value-override>default value
   override</a> is non-null, then return it.<li><p>Return this element's <a id=the-output-element:descendant-text-content href=https://dom.spec.whatwg.org/#concept-descendant-text-content data-x-internal=descendant-text-content>descendant text content</a>.</ol>

  <p>The <a href=form-control-infrastructure.html#concept-form-reset-control id=the-output-element:concept-form-reset-control>reset algorithm</a> for <code id=the-output-element:the-output-element-4><a href=#the-output-element>output</a></code>
  elements is to run these steps:

  <ol><li><p><a id=the-output-element:string-replace-all href=https://dom.spec.whatwg.org/#string-replace-all data-x-internal=string-replace-all>String replace all</a> with this element's <a href=#concept-output-default-value id=the-output-element:concept-output-default-value>default value</a> within this element.<li><p>Set this element's <a href=#concept-output-default-value-override id=the-output-element:concept-output-default-value-override-2>default value
   override</a> to null.</ol>

  

  <dl class=domintro><dt><code><var>output</var>.<a href=#dom-output-value id=dom-output-value-dev>value</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the element's current value.</p>

    <p>Can be set, to change the value.</p>
   <dt><code><var>output</var>.<a href=#dom-output-defaultvalue id=dom-output-defaultvalue-dev>defaultValue</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the element's current default value.</p>

    <p>Can be set, to change the default value.</p>
   <dt><code><var>output</var>.<a href=#dom-output-type id=dom-output-type-dev>type</a></code><dd><p>Returns the string "<code>output</code>".</dl>

  

  <p>The <dfn data-dfn-for=HTMLOutputElement id=dom-output-value data-dfn-type=attribute><code>value</code></dfn>
  getter steps are to return <a id=the-output-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-output-element:descendant-text-content-2 href=https://dom.spec.whatwg.org/#concept-descendant-text-content data-x-internal=descendant-text-content>descendant text content</a>.</p>

  <p>The <code id=the-output-element:dom-output-value-2><a href=#dom-output-value>value</a></code> setter steps are:</p>

  <ol><li><p>Set <a id=the-output-element:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-output-default-value-override id=the-output-element:concept-output-default-value-override-3>default value
   override</a> to its <a href=#concept-output-default-value id=the-output-element:concept-output-default-value-2>default value</a>.<li><p><a id=the-output-element:string-replace-all-2 href=https://dom.spec.whatwg.org/#string-replace-all data-x-internal=string-replace-all>String replace all</a> with the given value within <a id=the-output-element:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.</ol>

  <p>The <dfn data-dfn-for=HTMLOutputElement id=dom-output-defaultvalue data-dfn-type=attribute><code>defaultValue</code></dfn> getter steps are to return the result
  of running <a id=the-output-element:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-output-default-value id=the-output-element:concept-output-default-value-3>default
  value</a>.</p>

  <p>The <code id=the-output-element:dom-output-defaultvalue-2><a href=#dom-output-defaultvalue>defaultValue</a></code> setter steps are:</p>

  <ol><li><p>If <a id=the-output-element:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-output-default-value-override id=the-output-element:concept-output-default-value-override-4>default value
   override</a> is null, then <a id=the-output-element:string-replace-all-3 href=https://dom.spec.whatwg.org/#string-replace-all data-x-internal=string-replace-all>string replace all</a> with the given value within
   <a id=the-output-element:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> and return.<li><p>Set <a id=the-output-element:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-output-default-value-override id=the-output-element:concept-output-default-value-override-5>default value
   override</a> to the given value.</ol>

  <p>The <dfn data-dfn-for=HTMLOutputElement id=dom-output-type data-dfn-type=attribute><code>type</code></dfn>
  getter steps are to return "<code>output</code>".</p>

  <p>The <code id=the-output-element:dom-cva-willvalidate-2><a href=form-control-infrastructure.html#dom-cva-willvalidate>willValidate</a></code>, <code id=the-output-element:dom-cva-validity-2><a href=form-control-infrastructure.html#dom-cva-validity>validity</a></code>, and <code id=the-output-element:dom-cva-validationmessage-2><a href=form-control-infrastructure.html#dom-cva-validationmessage>validationMessage</a></code> IDL attributes, and the <code id=the-output-element:dom-cva-checkvalidity-2><a href=form-control-infrastructure.html#dom-cva-checkvalidity>checkValidity()</a></code>, <code id=the-output-element:dom-cva-reportvalidity-2><a href=form-control-infrastructure.html#dom-cva-reportvalidity>reportValidity()</a></code>, and <code id=the-output-element:dom-cva-setcustomvalidity-2><a href=form-control-infrastructure.html#dom-cva-setcustomvalidity>setCustomValidity()</a></code> methods, are part of the
  <a id=the-output-element:the-constraint-validation-api href=form-control-infrastructure.html#the-constraint-validation-api>constraint validation API</a>. The <code id=the-output-element:dom-lfe-labels-2><a href=forms.html#dom-lfe-labels>labels</a></code> IDL
  attribute provides a list of the element's <code id=the-output-element:the-label-element><a href=forms.html#the-label-element>label</a></code>s. The <code id=the-output-element:dom-fae-form-2><a href=form-control-infrastructure.html#dom-fae-form>form</a></code> and <code id=the-output-element:dom-output-name><a href=#dom-output-name>name</a></code> IDL attributes
  are part of the element's forms API.</p>

  

  <div class=example>

   <p>A simple calculator could use <code id=the-output-element:the-output-element-5><a href=#the-output-element>output</a></code> for its display of calculated results:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>onsubmit</c-><c- o>=</c-><c- s>&quot;return false&quot;</c-> <c- e>oninput</c-><c- o>=</c-><c- s>&quot;o.value = a.valueAsNumber + b.valueAsNumber&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>a</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>step</c-><c- o>=</c-><c- s>any</c-><c- p>&gt;</c-> +
 <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>b</c-> <c- e>type</c-><c- o>=</c-><c- s>number</c-> <c- e>step</c-><c- o>=</c-><c- s>any</c-><c- p>&gt;</c-> =
 <c- p>&lt;</c-><c- f>output</c-> <c- e>id</c-><c- o>=</c-><c- s>o</c-> <c- e>for</c-><c- o>=</c-><c- s>&quot;a b&quot;</c-><c- p>&gt;&lt;/</c-><c- f>output</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>In this example, an <code id=the-output-element:the-output-element-6><a href=#the-output-element>output</a></code> element is used to report the results of a calculation performed by a remote
   server, as they come in:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>output</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;result&quot;</c-><c- p>&gt;&lt;/</c-><c- f>output</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>var</c-> primeSource <c- o>=</c-> <c- k>new</c-> WebSocket<c- p>(</c-><c- t>&apos;ws://primes.example.net/&apos;</c-><c- p>);</c->
 primeSource<c- p>.</c->onmessage <c- o>=</c-> <c- a>function</c-> <c- p>(</c->event<c- p>)</c-> <c- p>{</c->
   document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;result&apos;</c-><c- p>).</c->value <c- o>=</c-> event<c- p>.</c->data<c- p>;</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=the-progress-element><span class=secno>4.10.13</span> The <dfn data-dfn-type=element><code>progress</code></dfn> element<a href=#the-progress-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress title="The <progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.">Element/progress</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLProgressElement title="The HTMLProgressElement interface provides special properties and methods (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of <progress> elements.">HTMLProgressElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-progress-element:concept-element-categories>Categories</a>:<dd><a id=the-progress-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-progress-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a href=forms.html#category-label id=the-progress-element:category-label>Labelable element</a>.<dd><a id=the-progress-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-progress-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-progress-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-progress-element:concept-element-content-model>Content model</a>:<dd><a id=the-progress-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>, but there must be no <code id=the-progress-element:the-progress-element><a href=#the-progress-element>progress</a></code> element descendants.<dt><a href=dom.html#concept-element-tag-omission id=the-progress-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-progress-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-progress-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-progress-element:attr-progress-value><a href=#attr-progress-value>value</a></code> —  Current value of the element
     <dd><code id=the-progress-element:attr-progress-max><a href=#attr-progress-max>max</a></code> —  Upper bound of range
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-progress-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-progress>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-progress>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-progress-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlprogresselement' data-dfn-type='interface'><c- g>HTMLProgressElement</c-></dfn> : <a id='the-progress-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-progress-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-progress-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-progress-element:xattr-reflectsetter'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-progress-value' id='the-progress-element:dom-progress-value'><c- g>value</c-></a>;
  [<a id='the-progress-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectpositive' id='the-progress-element:xattr-reflectpositive'><c- g>ReflectPositive</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectdefault' id='the-progress-element:xattr-reflectdefault'>ReflectDefault=1.0</a>] <c- b>attribute</c-> <c- b>double</c-> <dfn id='dom-progress-max'><c- g>max</c-></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-progress-position' id='the-progress-element:dom-progress-position'><c- g>position</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-progress-element:nodelist' href='https://dom.spec.whatwg.org/#interface-nodelist' data-x-internal='nodelist'><c- n>NodeList</c-></a> <a href='forms.html#dom-lfe-labels' id='the-progress-element:dom-lfe-labels'><c- g>labels</c-></a>;
};</code></pre>
   </dl>

  <p>The <code id=the-progress-element:the-progress-element-2><a href=#the-progress-element>progress</a></code> element <a id=the-progress-element:represents href=dom.html#represents>represents</a> the completion progress of a task.
  The progress is either indeterminate, indicating that progress is being made but that it is not
  clear how much more work remains to be done before the task is complete (e.g. because the task is
  waiting for a remote host to respond), or the progress is a number in the range zero to a maximum,
  giving the fraction of work that has so far been completed.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max title="The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the value of the element is greater than this, the element fails validation. This value must be greater than or equal to the value of the min attribute. If the max attribute is present but is not specified or is invalid, no max value is applied. If the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission.">Attributes/max</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>6+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>7+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><p>There are two attributes that determine the current task completion represented by the element.
  The <dfn data-dfn-for=progress id=attr-progress-value data-dfn-type=element-attr><code>value</code></dfn>
  attribute specifies how much of the task has been completed, and the <dfn data-dfn-for=progress id=attr-progress-max data-dfn-type=element-attr><code>max</code></dfn> attribute specifies how much work
  the task requires in total. The units are arbitrary and not specified.</p>

  <p class=note>To make a determinate progress bar, add a <code id=the-progress-element:attr-progress-value-2><a href=#attr-progress-value>value</a></code> attribute with the current progress (either a number from
  0.0 to 1.0, or, if the <code id=the-progress-element:attr-progress-max-2><a href=#attr-progress-max>max</a></code> attribute is specified, a number
  from 0 to the value of the <code id=the-progress-element:attr-progress-max-3><a href=#attr-progress-max>max</a></code> attribute). To make an
  indeterminate progress bar, remove the <code id=the-progress-element:attr-progress-value-3><a href=#attr-progress-value>value</a></code>
  attribute.</p>

  <p>Authors are encouraged to also include the current value and the maximum value inline as text
  inside the element, so that the progress is made available to users of legacy user agents.</p>

  <div class=example>

   <p>Here is a snippet of a web application that shows the progress of some automated task:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>section</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->Task Progress<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Progress: <c- p>&lt;</c-><c- f>progress</c-> <c- e>id</c-><c- o>=</c-><c- s>p</c-> <c- e>max</c-><c- o>=</c-><c- s>100</c-><c- p>&gt;&lt;</c-><c- f>span</c-><c- p>&gt;</c->0<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->%<c- p>&lt;/</c-><c- f>progress</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>var</c-> progressBar <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;p&apos;</c-><c- p>);</c->
  <c- a>function</c-> updateProgress<c- p>(</c->newValue<c- p>)</c-> <c- p>{</c->
    progressBar<c- p>.</c->value <c- o>=</c-> newValue<c- p>;</c->
    progressBar<c- p>.</c->getElementsByTagName<c- p>(</c-><c- t>&apos;span&apos;</c-><c- p>)[</c-><c- mf>0</c-><c- p>].</c->textContent <c- o>=</c-> newValue<c- p>;</c->
  <c- p>}</c->
 <c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>section</c-><c- p>&gt;</c-></code></pre>

   <p>(The <code>updateProgress()</code> method in this example would be called by some
   other code on the page to update the actual progress bar as the task progressed.)</p>

  </div>

  <p>The <code id=the-progress-element:attr-progress-value-4><a href=#attr-progress-value>value</a></code> and <code id=the-progress-element:attr-progress-max-4><a href=#attr-progress-max>max</a></code> attributes, when present, must have values that are <a href=common-microsyntaxes.html#valid-floating-point-number id=the-progress-element:valid-floating-point-number>valid floating-point numbers</a>. The <code id=the-progress-element:attr-progress-value-5><a href=#attr-progress-value>value</a></code> attribute, if present, must have a value greater than or
  equal to zero, and less than or equal to the value of the <code id=the-progress-element:attr-progress-max-5><a href=#attr-progress-max>max</a></code> attribute, if present, or 1.0, otherwise. The <code id=the-progress-element:attr-progress-max-6><a href=#attr-progress-max>max</a></code> attribute, if present, must have a value greater than
  zero.</p>

  <p class=note>The <code id=the-progress-element:the-progress-element-3><a href=#the-progress-element>progress</a></code> element is the wrong element to use for something that
  is just a gauge, as opposed to task progress. For instance, indicating disk space usage using
  <code id=the-progress-element:the-progress-element-4><a href=#the-progress-element>progress</a></code> would be inappropriate. Instead, the <code id=the-progress-element:the-meter-element><a href=#the-meter-element>meter</a></code> element is available
  for such use cases.</p>

  

  <p><strong>User agent requirements</strong>: If the <code id=the-progress-element:attr-progress-value-6><a href=#attr-progress-value>value</a></code>
  attribute is omitted, then the progress bar is an indeterminate progress bar. Otherwise, it is a
  determinate progress bar.</p>

  <p>If the progress bar is a determinate progress bar and the element has a <code id=the-progress-element:attr-progress-max-7><a href=#attr-progress-max>max</a></code> attribute, the user agent must parse the <code id=the-progress-element:attr-progress-max-8><a href=#attr-progress-max>max</a></code> attribute's value according to the <a id=the-progress-element:rules-for-parsing-floating-point-number-values href=common-microsyntaxes.html#rules-for-parsing-floating-point-number-values>rules for parsing
  floating-point number values</a>. If this does not result in an error, and if the parsed value
  is greater than zero, then the <dfn id=concept-progress-maximum>maximum value</dfn> of the
  progress bar is that value. Otherwise, if the element has no <code id=the-progress-element:attr-progress-max-9><a href=#attr-progress-max>max</a></code> attribute, or if it has one but parsing it resulted in an
  error, or if the parsed value was less than or equal to zero, then the <a href=#concept-progress-maximum id=the-progress-element:concept-progress-maximum>maximum value</a> of the progress bar is 1.0.</p>

  <p>If the progress bar is a determinate progress bar, user agents must parse the <code id=the-progress-element:attr-progress-value-7><a href=#attr-progress-value>value</a></code> attribute's value according to the <a id=the-progress-element:rules-for-parsing-floating-point-number-values-2 href=common-microsyntaxes.html#rules-for-parsing-floating-point-number-values>rules for
  parsing floating-point number values</a>. If this does not result in an error and the parsed
  value is greater than zero, then the <dfn id=concept-progress-value>value</dfn> of the
  progress bar is that parsed value. Otherwise, if parsing the <code id=the-progress-element:attr-progress-value-8><a href=#attr-progress-value>value</a></code> attribute's value resulted in an error or a number less
  than or equal to zero, then the <a href=#concept-progress-value id=the-progress-element:concept-progress-value>value</a> of the progress
  bar is zero.</p>

  <p>If the progress bar is a determinate progress bar, then the <dfn id=concept-progress-current-value>current value</dfn> is the <a href=#concept-progress-maximum id=the-progress-element:concept-progress-maximum-2>maximum value</a>, if <a href=#concept-progress-value id=the-progress-element:concept-progress-value-2>value</a> is greater than the <a href=#concept-progress-maximum id=the-progress-element:concept-progress-maximum-3>maximum value</a>, and <a href=#concept-progress-value id=the-progress-element:concept-progress-value-3>value</a> otherwise.</p>

  <p><strong>UA requirements for showing the progress bar</strong>: When representing a
  <code id=the-progress-element:the-progress-element-5><a href=#the-progress-element>progress</a></code> element to the user, the UA should indicate whether it is a determinate or
  indeterminate progress bar, and in the former case, should indicate the relative position of the
  <a href=#concept-progress-current-value id=the-progress-element:concept-progress-current-value>current value</a> relative to the <a href=#concept-progress-maximum id=the-progress-element:concept-progress-maximum-4>maximum value</a>.</p>

  

  <dl class=domintro><dt><code><var>progress</var>.<a href=#dom-progress-position id=dom-progress-position-dev>position</a></code><dd>
    <p>For a determinate progress bar (one with known current and maximum values), returns the
    result of dividing the current value by the maximum value.</p>

    <p>For an indeterminate progress bar, returns −1.</p>
   </dl>

  

  <p>If the progress bar is an indeterminate progress bar, then the <dfn data-dfn-for=HTMLProgressElement id=dom-progress-position data-dfn-type=attribute><code>position</code></dfn> IDL attribute
  must return −1. Otherwise, it must return the result of dividing the <a href=#concept-progress-current-value id=the-progress-element:concept-progress-current-value-2>current value</a> by the <a href=#concept-progress-maximum id=the-progress-element:concept-progress-maximum-5>maximum value</a>.</p>

  <p>The <dfn data-dfn-for=HTMLProgressElement id=dom-progress-value data-dfn-type=attribute><code>value</code></dfn> getter steps are to return 0 if <a id=the-progress-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>
  is an indeterminate progress bar; otherwise <a id=the-progress-element:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-progress-value id=the-progress-element:concept-progress-value-4>current value</a>.</p>

  <p class=note>Setting the <code id=the-progress-element:dom-progress-value-2><a href=#dom-progress-value>value</a></code> IDL attribute to itself
  when the corresponding content attribute is absent would change the progress bar from an
  indeterminate progress bar to a determinate progress bar with no progress.</p>

  <p>The <code id=the-progress-element:dom-lfe-labels-2><a href=forms.html#dom-lfe-labels>labels</a></code> IDL attribute provides a list of the element's
  <code id=the-progress-element:the-label-element><a href=forms.html#the-label-element>label</a></code>s.</p>

  



  <h4 id=the-meter-element><span class=secno>4.10.14</span> The <dfn data-dfn-type=element><code>meter</code></dfn> element<a href=#the-meter-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter title="The <meter> HTML element represents either a scalar value within a known range or a fractional value.">Element/meter</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>16+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>10.3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android no"><span>WebView Android</span><span>No</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>
  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLMeterElement title="The HTML <meter> elements expose the HTMLMeterElement interface, which provides special properties and methods (beyond the HTMLElement object interface they also have available to them by inheritance) for manipulating the layout and presentation of <meter> elements.">HTMLMeterElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>16+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-meter-element:concept-element-categories>Categories</a>:<dd><a id=the-meter-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-meter-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a href=forms.html#category-label id=the-meter-element:category-label>Labelable element</a>.<dd><a id=the-meter-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-meter-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-meter-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-meter-element:concept-element-content-model>Content model</a>:<dd><a id=the-meter-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>Phrasing content</a>, but there must be no <code id=the-meter-element:the-meter-element><a href=#the-meter-element>meter</a></code> element descendants.<dt><a href=dom.html#concept-element-tag-omission id=the-meter-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-meter-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-meter-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-meter-element:attr-meter-value><a href=#attr-meter-value>value</a></code> —  Current value of the element
     <dd><code id=the-meter-element:attr-meter-min><a href=#attr-meter-min>min</a></code> —  Lower bound of range
     <dd><code id=the-meter-element:attr-meter-max><a href=#attr-meter-max>max</a></code> —  Upper bound of range
     <dd><code id=the-meter-element:attr-meter-low><a href=#attr-meter-low>low</a></code> —  High limit of low range
     <dd><code id=the-meter-element:attr-meter-high><a href=#attr-meter-high>high</a></code> —  Low limit of high range
     <dd><code id=the-meter-element:attr-meter-optimum><a href=#attr-meter-optimum>optimum</a></code> —  Optimum value in gauge
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-meter-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-meter>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-meter>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-meter-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlmeterelement' data-dfn-type='interface'><c- g>HTMLMeterElement</c-></dfn> : <a id='the-meter-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-meter-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-meter-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-meter-element:xattr-reflectsetter'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-meter-value' id='the-meter-element:dom-meter-value'><c- g>value</c-></a>;
  [<a id='the-meter-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-meter-element:xattr-reflectsetter-2'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-meter-min' id='the-meter-element:dom-meter-min'><c- g>min</c-></a>;
  [<a id='the-meter-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-meter-element:xattr-reflectsetter-3'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-meter-max' id='the-meter-element:dom-meter-max'><c- g>max</c-></a>;
  [<a id='the-meter-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-meter-element:xattr-reflectsetter-4'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-meter-low' id='the-meter-element:dom-meter-low'><c- g>low</c-></a>;
  [<a id='the-meter-element:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-meter-element:xattr-reflectsetter-5'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-meter-high' id='the-meter-element:dom-meter-high'><c- g>high</c-></a>;
  [<a id='the-meter-element:cereactions-6' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflectsetter' id='the-meter-element:xattr-reflectsetter-6'><c- g>ReflectSetter</c-></a>] <c- b>attribute</c-> <c- b>double</c-> <a href='#dom-meter-optimum' id='the-meter-element:dom-meter-optimum'><c- g>optimum</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-meter-element:nodelist' href='https://dom.spec.whatwg.org/#interface-nodelist' data-x-internal='nodelist'><c- n>NodeList</c-></a> <a href='forms.html#dom-lfe-labels' id='the-meter-element:dom-lfe-labels'><c- g>labels</c-></a>;
};</code></pre>
   </dl>

  <p>The <code id=the-meter-element:the-meter-element-2><a href=#the-meter-element>meter</a></code> element <a id=the-meter-element:represents href=dom.html#represents>represents</a> a scalar measurement within a known
  range, or a fractional value; for example disk usage, the relevance of a query result, or the
  fraction of a voting population to have selected a particular candidate.</p>

  <p>This is also known as a gauge.</p>

  <p>The <code id=the-meter-element:the-meter-element-3><a href=#the-meter-element>meter</a></code> element should not be used to indicate progress (as in a progress bar).
  For that role, HTML provides a separate <code id=the-meter-element:the-progress-element><a href=#the-progress-element>progress</a></code> element.</p>

  <p class=note>The <code id=the-meter-element:the-meter-element-4><a href=#the-meter-element>meter</a></code> element also does not represent a scalar value of arbitrary
  range — for example, it would be wrong to use this to report a weight, or height, unless
  there is a known maximum value.</p>

  <p>There are six attributes that determine the semantics of the gauge represented by the
  element.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max title="The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the value of the element is greater than this, the element fails validation. This value must be greater than or equal to the value of the min attribute. If the max attribute is present but is not specified or is invalid, no max value is applied. If the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission.">Attributes/max</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>16+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>10.3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android no"><span>WebView Android</span><span>No</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min title="The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute. If the value of the element is less than this, the element fails validation. This value must be less than or equal to the value of the max attribute.">Attributes/min</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>16+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>6+</span></span><hr><span class="opera yes"><span>Opera</span><span>11+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>18</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>10.3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android no"><span>WebView Android</span><span>No</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><p>The <dfn data-dfn-for=meter id=attr-meter-min data-dfn-type=element-attr><code>min</code></dfn> attribute
  specifies the lower bound of the range, and the <dfn data-dfn-for=meter id=attr-meter-max data-dfn-type=element-attr><code>max</code></dfn> attribute specifies the upper bound. The <dfn data-dfn-for=meter id=attr-meter-value data-dfn-type=element-attr><code>value</code></dfn> attribute specifies
  the value to have the gauge indicate as the "measured" value.</p>

  <p>The other three attributes can be used to segment the gauge's range into "low", "medium", and
  "high" parts, and to indicate which part of the gauge is the "optimum" part. The <dfn data-dfn-for=meter id=attr-meter-low data-dfn-type=element-attr><code>low</code></dfn> attribute specifies the range that is
  considered to be the "low" part, and the <dfn data-dfn-for=meter id=attr-meter-high data-dfn-type=element-attr><code>high</code></dfn> attribute specifies the range that is considered to be
  the "high" part. The <dfn data-dfn-for=meter id=attr-meter-optimum data-dfn-type=element-attr><code>optimum</code></dfn> attribute gives the position that is "optimum";
  if that is higher than the "high" value then this indicates that the higher the value, the better;
  if it's lower than the "low" mark then it indicates that lower values are better, and naturally if
  it is in between then it indicates that neither high nor low values are good.</p>

  <p><strong>Authoring requirements</strong>: The <code id=the-meter-element:attr-meter-value-2><a href=#attr-meter-value>value</a></code> attribute must be specified. The <code id=the-meter-element:attr-meter-value-3><a href=#attr-meter-value>value</a></code>, <code id=the-meter-element:attr-meter-min-2><a href=#attr-meter-min>min</a></code>, <code id=the-meter-element:attr-meter-low-2><a href=#attr-meter-low>low</a></code>, <code id=the-meter-element:attr-meter-high-2><a href=#attr-meter-high>high</a></code>, <code id=the-meter-element:attr-meter-max-2><a href=#attr-meter-max>max</a></code>, and <code id=the-meter-element:attr-meter-optimum-2><a href=#attr-meter-optimum>optimum</a></code> attributes,
  when present, must have values that are <a href=common-microsyntaxes.html#valid-floating-point-number id=the-meter-element:valid-floating-point-number>valid
  floating-point numbers</a>.</p>

  <p>In addition, the attributes' values are further constrained:</p>

  <p>Let <var>value</var> be the <code id=the-meter-element:attr-meter-value-4><a href=#attr-meter-value>value</a></code> attribute's
  number.</p>

  <p>If the <code id=the-meter-element:attr-meter-min-3><a href=#attr-meter-min>min</a></code> attribute is specified, then let <var>minimum</var> be that attribute's value; otherwise, let it be 0.</p>

  <p>If the <code id=the-meter-element:attr-meter-max-3><a href=#attr-meter-max>max</a></code> attribute is specified, then let <var>maximum</var> be that attribute's value; otherwise, let it be 1.0.</p>

  <p>The following inequalities must hold, as applicable:</p>

  <ul><li><p><var>minimum</var> ≤ <var>value</var> ≤ <var>maximum</var><li><p><var>minimum</var> ≤ <code id=the-meter-element:attr-meter-low-3><a href=#attr-meter-low>low</a></code> ≤ <var>maximum</var>
   (if <code id=the-meter-element:attr-meter-low-4><a href=#attr-meter-low>low</a></code> is specified)<li><p><var>minimum</var> ≤ <code id=the-meter-element:attr-meter-high-3><a href=#attr-meter-high>high</a></code> ≤
   <var>maximum</var> (if <code id=the-meter-element:attr-meter-high-4><a href=#attr-meter-high>high</a></code> is specified)<li><p><var>minimum</var> ≤ <code id=the-meter-element:attr-meter-optimum-3><a href=#attr-meter-optimum>optimum</a></code> ≤
   <var>maximum</var> (if <code id=the-meter-element:attr-meter-optimum-4><a href=#attr-meter-optimum>optimum</a></code> is specified)<li><p><code id=the-meter-element:attr-meter-low-5><a href=#attr-meter-low>low</a></code> ≤ <code id=the-meter-element:attr-meter-high-5><a href=#attr-meter-high>high</a></code>
   (if both <code id=the-meter-element:attr-meter-low-6><a href=#attr-meter-low>low</a></code> and <code id=the-meter-element:attr-meter-high-6><a href=#attr-meter-high>high</a></code>
   are specified)</ul>

  <p class=note>If no minimum or maximum is specified, then the range is assumed to be 0..1, and
  the value thus has to be within that range.</p>

  <p>Authors are encouraged to include a textual representation of the gauge's state in the
  element's contents, for users of user agents that do not support the <code id=the-meter-element:the-meter-element-5><a href=#the-meter-element>meter</a></code>
  element.</p>

  <p>When used with <a id=the-meter-element:microdata href=microdata.html#microdata>microdata</a>, the <code id=the-meter-element:the-meter-element-6><a href=#the-meter-element>meter</a></code> element's <code id=the-meter-element:attr-meter-value-5><a href=#attr-meter-value>value</a></code> attribute provides the element's machine-readable value.</p>

  <div class=example>

   <p>The following examples show three gauges that would all be three-quarters full:</p>

   <pre><code class='html'>Storage space usage: <c- p>&lt;</c-><c- f>meter</c-> <c- e>value</c-><c- o>=</c-><c- s>6</c-> <c- e>max</c-><c- o>=</c-><c- s>8</c-><c- p>&gt;</c->6 blocks used (out of 8 total)<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c-></code></pre>

   <pre><code class='html'>Voter turnout: <c- p>&lt;</c-><c- f>meter</c-> <c- e>value</c-><c- o>=</c-><c- s>0.75</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;75%&quot;</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;graph75.png&quot;</c-><c- p>&gt;&lt;/</c-><c- f>meter</c-><c- p>&gt;</c-></code></pre>

   <pre><code class='html'>Tickets sold: <c- p>&lt;</c-><c- f>meter</c-> <c- e>min</c-><c- o>=</c-><c- s>&quot;0&quot;</c-> <c- e>max</c-><c- o>=</c-><c- s>&quot;100&quot;</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;75&quot;</c-><c- p>&gt;&lt;/</c-><c- f>meter</c-><c- p>&gt;</c-></code></pre>

   <p>The following example is incorrect use of the element, because it doesn't give a range (and
   since the default maximum is 1, both of the gauges would end up looking maxed out):</p>

   <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The grapefruit pie had a radius of <c- p>&lt;</c-><c- f>meter</c-> <c- e>value</c-><c- o>=</c-><c- s>12</c-><c- p>&gt;</c->12cm<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c->
and a height of <c- p>&lt;</c-><c- f>meter</c-> <c- e>value</c-><c- o>=</c-><c- s>2</c-><c- p>&gt;</c->2cm<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c-> <c- c>&lt;!-- </c-><strong><c- c>BAD!</c-></strong><c- c> --&gt;</c-></code></pre>

   <p>Instead, one would either not include the meter element, or use the meter element with a
   defined range to give the dimensions in context compared to other pies:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->The grapefruit pie had a radius of 12cm and a height of
2cm.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Radius: <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>meter</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>20</c-> <c- e>value</c-><c- o>=</c-><c- s>12</c-><c- p>&gt;</c->12cm<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Height: <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>meter</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>10</c-> <c- e>value</c-><c- o>=</c-><c- s>2</c-><c- p>&gt;</c->2cm<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>There is no explicit way to specify units in the <code id=the-meter-element:the-meter-element-7><a href=#the-meter-element>meter</a></code> element, but the units may
  be specified in the <code id=the-meter-element:attr-title><a href=dom.html#attr-title>title</a></code> attribute in free-form text.</p>

  <div class=example>

   <p>The example above could be extended to mention the units:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>dl</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Radius: <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>meter</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>20</c-> <c- e>value</c-><c- o>=</c-><c- s>12</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;centimeters&quot;</c-><c- p>&gt;</c->12cm<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>dt</c-><c- p>&gt;</c->Height: <c- p>&lt;</c-><c- f>dd</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>meter</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>10</c-> <c- e>value</c-><c- o>=</c-><c- s>2</c-> <c- e>title</c-><c- o>=</c-><c- s>&quot;centimeters&quot;</c-><c- p>&gt;</c->2cm<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>dl</c-><c- p>&gt;</c-></code></pre>

  </div>

  

  <p><strong>User agent requirements</strong>: User agents must parse the <code id=the-meter-element:attr-meter-min-4><a href=#attr-meter-min>min</a></code>, <code id=the-meter-element:attr-meter-max-4><a href=#attr-meter-max>max</a></code>, <code id=the-meter-element:attr-meter-value-6><a href=#attr-meter-value>value</a></code>, <code id=the-meter-element:attr-meter-low-7><a href=#attr-meter-low>low</a></code>, <code id=the-meter-element:attr-meter-high-7><a href=#attr-meter-high>high</a></code>, and <code id=the-meter-element:attr-meter-optimum-5><a href=#attr-meter-optimum>optimum</a></code>
  attributes using the <a id=the-meter-element:rules-for-parsing-floating-point-number-values href=common-microsyntaxes.html#rules-for-parsing-floating-point-number-values>rules for parsing floating-point number values</a>.</p>

  <p>User agents must then use all these numbers to obtain values for six points on the gauge, as
  follows. (The order in which these are evaluated is important, as some of the values refer to
  earlier ones.)</p>

  <dl><dt>The <dfn id=concept-meter-minimum>minimum value</dfn><dd>
    <p>If the <code id=the-meter-element:attr-meter-min-5><a href=#attr-meter-min>min</a></code> attribute is specified and a value could be
    parsed out of it, then the minimum value is that value. Otherwise, the minimum value is
    zero.</p>
   <dt>The <dfn id=concept-meter-maximum>maximum value</dfn><dd>
    <p>If the <code id=the-meter-element:attr-meter-max-5><a href=#attr-meter-max>max</a></code> attribute is specified and a value could be
    parsed out of it, then the candidate maximum value is that value. Otherwise, the candidate
    maximum value is 1.0.</p>

    <p>If the candidate maximum value is greater than or equal to the minimum value, then the
    maximum value is the candidate maximum value. Otherwise, the maximum value is the same as the
    minimum value.</p>
   <dt>The <dfn id=concept-meter-actual>actual value</dfn><dd>
    <p>If the <code id=the-meter-element:attr-meter-value-7><a href=#attr-meter-value>value</a></code> attribute is specified and a value could
    be parsed out of it, then that value is the candidate actual value. Otherwise, the candidate
    actual value is zero.</p>

    <p>If the candidate actual value is less than the minimum value, then the actual value is the
    minimum value.</p>

    <p>Otherwise, if the candidate actual value is greater than the maximum value, then the actual
    value is the maximum value.</p>

    <p>Otherwise, the actual value is the candidate actual value.</p>
   <dt>The <dfn id=concept-meter-low>low boundary</dfn><dd>
    <p>If the <code id=the-meter-element:attr-meter-low-8><a href=#attr-meter-low>low</a></code> attribute is specified and a value could be
    parsed out of it, then the candidate low boundary is that value. Otherwise, the candidate low
    boundary is the same as the minimum value.</p>

    <p>If the candidate low boundary is less than the minimum value, then the low boundary is the
    minimum value.</p>

    <p>Otherwise, if the candidate low boundary is greater than the maximum value, then the low
    boundary is the maximum value.</p>

    <p>Otherwise, the low boundary is the candidate low boundary.</p>
   <dt>The <dfn id=concept-meter-high>high boundary</dfn><dd>
    <p>If the <code id=the-meter-element:attr-meter-high-8><a href=#attr-meter-high>high</a></code> attribute is specified and a value could be
    parsed out of it, then the candidate high boundary is that value. Otherwise, the candidate high
    boundary is the same as the maximum value.</p>

    <p>If the candidate high boundary is less than the low boundary, then the high boundary is the
    low boundary.</p>

    <p>Otherwise, if the candidate high boundary is greater than the maximum value, then the high
    boundary is the maximum value.</p>

    <p>Otherwise, the high boundary is the candidate high boundary.</p>
   <dt>The <dfn id=concept-meter-optimum>optimum point</dfn><dd>
    <p>If the <code id=the-meter-element:attr-meter-optimum-6><a href=#attr-meter-optimum>optimum</a></code> attribute is specified and a value
    could be parsed out of it, then the candidate optimum point is that value. Otherwise, the
    candidate optimum point is the midpoint between the minimum value and the maximum value.</p>

    <p>If the candidate optimum point is less than the minimum value, then the optimum point is the
    minimum value.</p>

    <p>Otherwise, if the candidate optimum point is greater than the maximum value, then the optimum
    point is the maximum value.</p>

    <p>Otherwise, the optimum point is the candidate optimum point.</p>
   </dl>

  <p>All of which will result in the following inequalities all being true:</p>

  <ul><li><p>minimum value ≤ actual value ≤ maximum value<li><p>minimum value ≤ low boundary ≤ high boundary ≤ maximum value<li><p>minimum value ≤ optimum point ≤ maximum value</ul>

  <p><strong>UA requirements for regions of the gauge</strong>: If the optimum point is equal to the
  low boundary or the high boundary, or anywhere in between them, then the region between the low
  and high boundaries of the gauge must be treated as the optimum region, and the low and high
  parts, if any, must be treated as suboptimal. Otherwise, if the optimum point is less than the low
  boundary, then the region between the minimum value and the low boundary must be treated as the
  optimum region, the region from the low boundary up to the high boundary must be treated as a
  suboptimal region, and the remaining region must be treated as an even less good region. Finally,
  if the optimum point is higher than the high boundary, then the situation is reversed; the region
  between the high boundary and the maximum value must be treated as the optimum region, the region
  from the high boundary down to the low boundary must be treated as a suboptimal region, and the
  remaining region must be treated as an even less good region.</p>

  <p><strong>UA requirements for showing the gauge</strong>: When representing a <code id=the-meter-element:the-meter-element-8><a href=#the-meter-element>meter</a></code>
  element to the user, the UA should indicate the relative position of the actual value to the
  minimum and maximum values, and the relationship between the actual value and the three regions of
  the gauge.</p>

  

  <div class=example>
   <p>The following markup:</p>
   <pre><code class='html'><c- p>&lt;</c-><c- f>h3</c-><c- p>&gt;</c->Suggested groups<c- p>&lt;/</c-><c- f>h3</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>menu</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?cmd=hsg&quot;</c-> <c- e>onclick</c-><c- o>=</c-><c- s>&quot;hideSuggestedGroups()&quot;</c-><c- p>&gt;</c->Hide suggested groups<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>menu</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/group/comp.infosystems.www.authoring.stylesheets/view&quot;</c-><c- p>&gt;</c->comp.infosystems.www.authoring.stylesheets<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> -
     <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/group/comp.infosystems.www.authoring.stylesheets/subscribe&quot;</c-><c- p>&gt;</c->join<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Group description: <c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;</c->Layout/presentation on the WWW.<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>meter</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;0.5&quot;</c-><c- p>&gt;</c->Moderate activity,<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c-></strong> Usenet, 618 subscribers<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/group/netscape.public.mozilla.xpinstall/view&quot;</c-><c- p>&gt;</c->netscape.public.mozilla.xpinstall<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> -
     <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/group/netscape.public.mozilla.xpinstall/subscribe&quot;</c-><c- p>&gt;</c->join<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Group description: <c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;</c->Mozilla XPInstall discussion.<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>meter</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;0.25&quot;</c-><c- p>&gt;</c->Low activity,<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c-></strong> Usenet, 22 subscribers<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/group/mozilla.dev.general/view&quot;</c-><c- p>&gt;</c->mozilla.dev.general<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> -
     <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/group/mozilla.dev.general/subscribe&quot;</c-><c- p>&gt;</c->join<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-><strong><c- p>&lt;</c-><c- f>meter</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;0.25&quot;</c-><c- p>&gt;</c->Low activity,<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;</c-></strong> Usenet, 66 subscribers<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c-></code></pre>
   <p>Might be rendered as follows:</p>
   <p><img src=../images/sample-meter.png width=332 alt="With the <meter> elements rendered as inline green bars of varying lengths." height=178></p>
  </div>

  <p>User agents may combine the value of the <code id=the-meter-element:attr-title-2><a href=dom.html#attr-title>title</a></code> attribute and the other attributes to provide context-sensitive
  help or inline text detailing the actual values.</p>

  <div class=example>
   <p>For example, the following snippet:</p>
   <pre><code class='html'><c- p>&lt;</c-><c- f>meter</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>60</c-> <c- e>value</c-><c- o>=</c-><c- s>23.2</c-> <c- e>title</c-><c- o>=</c-><c- s>seconds</c-><c- p>&gt;&lt;/</c-><c- f>meter</c-><c- p>&gt;</c-></code></pre>
   <p>...might cause the user agent to display a gauge with a tooltip
   saying "Value: 23.2 out of 60." on one line and "seconds" on a
   second line.</p>
  </div>

  

  <p>The <dfn data-dfn-for=HTMLMeterElement id=dom-meter-value data-dfn-type=attribute><code>value</code></dfn>
  getter steps are to return <a id=the-meter-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-meter-actual id=the-meter-element:concept-meter-actual>actual
  value</a>.</p>

  <p>The <dfn data-dfn-for=HTMLMeterElement id=dom-meter-min data-dfn-type=attribute><code>min</code></dfn> getter
  steps are to return <a id=the-meter-element:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-meter-minimum id=the-meter-element:concept-meter-minimum>minimum
  value</a>.</p>

  <p>The <dfn data-dfn-for=HTMLMeterElement id=dom-meter-max data-dfn-type=attribute><code>max</code></dfn> getter
  steps are to return <a id=the-meter-element:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-meter-maximum id=the-meter-element:concept-meter-maximum>maximum
  value</a>.</p>

  <p>The <dfn data-dfn-for=HTMLMeterElement id=dom-meter-low data-dfn-type=attribute><code>low</code></dfn> getter
  steps are to return <a id=the-meter-element:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-meter-low id=the-meter-element:concept-meter-low>low boundary</a>.</p>

  <p>The <dfn data-dfn-for=HTMLMeterElement id=dom-meter-high data-dfn-type=attribute><code>high</code></dfn>
  getter steps are to return <a id=the-meter-element:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-meter-high id=the-meter-element:concept-meter-high>high
  boundary</a>.</p>

  <p>The <dfn data-dfn-for=HTMLMeterElement id=dom-meter-optimum data-dfn-type=attribute><code>optimum</code></dfn>
  getter steps are to return <a id=the-meter-element:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-meter-optimum id=the-meter-element:concept-meter-optimum>optimum
  value</a>.</p>

  <p>The <code id=the-meter-element:dom-lfe-labels-2><a href=forms.html#dom-lfe-labels>labels</a></code> IDL attribute provides a list of the element's
  <code id=the-meter-element:the-label-element><a href=forms.html#the-label-element>label</a></code>s.</p>

  

  <div class=example>

   <p>The following example shows how a gauge could fall back to localized or pretty-printed
   text.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Disk usage: <c- p>&lt;</c-><c- f>meter</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>value</c-><c- o>=</c-><c- s>170261928</c-> <c- e>max</c-><c- o>=</c-><c- s>233257824</c-><c- p>&gt;</c->170 261 928 bytes used
out of 233 257 824 bytes available<c- p>&lt;/</c-><c- f>meter</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  </div>




  <h4 id=the-fieldset-element><span class=secno>4.10.15</span> The <dfn data-dfn-type=element><code>fieldset</code></dfn> element<a href=#the-fieldset-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset title="The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form.">Element/fieldset</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>15+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>14+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldSetElement title="The HTMLFieldSetElement interface provides special properties and methods (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of <fieldset> elements.">HTMLFieldSetElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-fieldset-element:concept-element-categories>Categories</a>:<dd><a id=the-fieldset-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a href=forms.html#category-listed id=the-fieldset-element:category-listed>Listed</a> and <a href=forms.html#category-autocapitalize id=the-fieldset-element:category-autocapitalize>autocapitalize-and-autocorrect inheriting</a> <a id=the-fieldset-element:form-associated-element href=forms.html#form-associated-element>form-associated element</a>.<dd><a id=the-fieldset-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-fieldset-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-fieldset-element:flow-content-2-2 href=dom.html#flow-content-2>flow content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-fieldset-element:concept-element-content-model>Content model</a>:<dd>Optionally, a <code id=the-fieldset-element:the-legend-element><a href=#the-legend-element>legend</a></code> element, followed by <a id=the-fieldset-element:flow-content-2-3 href=dom.html#flow-content-2>flow content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-fieldset-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-fieldset-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-fieldset-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-fieldset-element:attr-fieldset-disabled><a href=#attr-fieldset-disabled>disabled</a></code> —  Whether the descendant form controls, except any inside <code id=the-fieldset-element:the-legend-element-2><a href=#the-legend-element>legend</a></code>, are disabled
     <dd><code id=the-fieldset-element:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> —  Associates the element with a <code id=the-fieldset-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element
     <dd><code id=the-fieldset-element:attr-fe-name><a href=form-control-infrastructure.html#attr-fe-name>name</a></code>   — Name of the element to use in the <code id=the-fieldset-element:dom-form-elements><a href=forms.html#dom-form-elements>form.elements</a></code> API.<dt><a href=dom.html#concept-element-accessibility-considerations id=the-fieldset-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-fieldset>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-fieldset>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-fieldset-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlfieldsetelement' data-dfn-type='interface'><c- g>HTMLFieldSetElement</c-></dfn> : <a id='the-fieldset-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-fieldset-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-fieldset-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-fieldset-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLFieldSetElement' id='dom-fieldset-disabled' data-dfn-type='attribute'><c- g>disabled</c-></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-fieldset-element:htmlformelement' href='forms.html#htmlformelement'><c- n>HTMLFormElement</c-></a>? <a href='form-control-infrastructure.html#dom-fae-form' id='the-fieldset-element:dom-fae-form'><c- g>form</c-></a>;
  [<a id='the-fieldset-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-fieldset-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLFieldSetElement' id='dom-fieldset-name' data-dfn-type='attribute'><c- g>name</c-></dfn>;

  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-fieldset-type' id='the-fieldset-element:dom-fieldset-type'><c- g>type</c-></a>;

  [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-fieldset-element:htmlcollection' href='https://dom.spec.whatwg.org/#interface-htmlcollection' data-x-internal='htmlcollection'><c- n>HTMLCollection</c-></a> <a href='#dom-fieldset-elements' id='the-fieldset-element:dom-fieldset-elements'><c- g>elements</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-willvalidate' id='the-fieldset-element:dom-cva-willvalidate'><c- g>willValidate</c-></a>;
  [<c- g>SameObject</c->] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-fieldset-element:validitystate' href='form-control-infrastructure.html#validitystate'><c- n>ValidityState</c-></a> <a href='form-control-infrastructure.html#dom-cva-validity' id='the-fieldset-element:dom-cva-validity'><c- g>validity</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-cva-validationmessage' id='the-fieldset-element:dom-cva-validationmessage'><c- g>validationMessage</c-></a>;
  <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-checkvalidity' id='the-fieldset-element:dom-cva-checkvalidity'><c- g>checkValidity</c-></a>();
  <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-reportvalidity' id='the-fieldset-element:dom-cva-reportvalidity'><c- g>reportValidity</c-></a>();
  <c- b>undefined</c-> <a href='form-control-infrastructure.html#dom-cva-setcustomvalidity' id='the-fieldset-element:dom-cva-setcustomvalidity'><c- g>setCustomValidity</c-></a>(<c- b>DOMString</c-> <c- g>error</c->);
};</code></pre>
   </dl>

  <p>The <code id=the-fieldset-element:the-fieldset-element><a href=#the-fieldset-element>fieldset</a></code> element <a id=the-fieldset-element:represents href=dom.html#represents>represents</a> a set of form controls (or other
  content) grouped together, optionally with a caption. The caption is given by the first
  <code id=the-fieldset-element:the-legend-element-3><a href=#the-legend-element>legend</a></code> element that is a child of the <code id=the-fieldset-element:the-fieldset-element-2><a href=#the-fieldset-element>fieldset</a></code> element, if any. The
  remainder of the descendants form the group.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#attr-disabled title="The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form.">Element/fieldset#attr-disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>4+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera yes"><span>Opera</span><span>12+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12+</span></span></div></div></div><p>The <dfn data-dfn-for=fieldset id=attr-fieldset-disabled data-dfn-type=element-attr><code>disabled</code></dfn> attribute, when specified, causes all the
  form control descendants of the <code id=the-fieldset-element:the-fieldset-element-3><a href=#the-fieldset-element>fieldset</a></code> element, excluding those that are
  descendants of the <code id=the-fieldset-element:the-fieldset-element-4><a href=#the-fieldset-element>fieldset</a></code> element's first <code id=the-fieldset-element:the-legend-element-4><a href=#the-legend-element>legend</a></code> element child, if
  any, to be <a href=form-control-infrastructure.html#concept-fe-disabled id=the-fieldset-element:concept-fe-disabled>disabled</a>.</p>

  <p>A <code id=the-fieldset-element:the-fieldset-element-5><a href=#the-fieldset-element>fieldset</a></code> element is a <dfn id=concept-fieldset-disabled>disabled
  fieldset</dfn> if it matches any of the following conditions:</p>

  <ul><li>Its <code id=the-fieldset-element:attr-fieldset-disabled-2><a href=#attr-fieldset-disabled>disabled</a></code> attribute is specified

   <li>It is a descendant of another <code id=the-fieldset-element:the-fieldset-element-6><a href=#the-fieldset-element>fieldset</a></code> element whose <code id=the-fieldset-element:attr-fieldset-disabled-3><a href=#attr-fieldset-disabled>disabled</a></code> attribute is specified, and is <em>not</em> a
   descendant of that <code id=the-fieldset-element:the-fieldset-element-7><a href=#the-fieldset-element>fieldset</a></code> element's first <code id=the-fieldset-element:the-legend-element-5><a href=#the-legend-element>legend</a></code> element child, if
   any.</ul>

  <p>The <code id=the-fieldset-element:attr-fae-form-2><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> attribute is used to explicitly associate the
  <code id=the-fieldset-element:the-fieldset-element-8><a href=#the-fieldset-element>fieldset</a></code> element with its <a id=the-fieldset-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>. The <code id=the-fieldset-element:attr-fe-name-2><a href=form-control-infrastructure.html#attr-fe-name>name</a></code> attribute represents the element's name.</p>

  <dl class=domintro><dt><code><var>fieldset</var>.<a href=#dom-fieldset-type id=dom-fieldset-type-dev>type</a></code><dd><p>Returns the string "fieldset".<dt><code><var>fieldset</var>.<a href=#dom-fieldset-elements id=dom-fieldset-elements-dev>elements</a></code><dd><p>Returns an <code id=the-fieldset-element:htmlcollection-2><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> of the form controls in the element.</dl>

  

  <p>The <dfn data-dfn-for=HTMLFieldSetElement id=dom-fieldset-type data-dfn-type=attribute><code>type</code></dfn>
  IDL attribute must return the string "<code>fieldset</code>".</p>

  <p>The <dfn data-dfn-for=HTMLFieldSetElement id=dom-fieldset-elements data-dfn-type=attribute><code>elements</code></dfn> IDL attribute must return an
  <code id=the-fieldset-element:htmlcollection-3><a data-x-internal=htmlcollection href=https://dom.spec.whatwg.org/#interface-htmlcollection>HTMLCollection</a></code> rooted at the <code id=the-fieldset-element:the-fieldset-element-9><a href=#the-fieldset-element>fieldset</a></code> element, whose filter matches
  <a href=forms.html#category-listed id=the-fieldset-element:category-listed-2>listed elements</a>.</p>

  <p>The <code id=the-fieldset-element:dom-cva-willvalidate-2><a href=form-control-infrastructure.html#dom-cva-willvalidate>willValidate</a></code>, <code id=the-fieldset-element:dom-cva-validity-2><a href=form-control-infrastructure.html#dom-cva-validity>validity</a></code>, and <code id=the-fieldset-element:dom-cva-validationmessage-2><a href=form-control-infrastructure.html#dom-cva-validationmessage>validationMessage</a></code> attributes, and the <code id=the-fieldset-element:dom-cva-checkvalidity-2><a href=form-control-infrastructure.html#dom-cva-checkvalidity>checkValidity()</a></code>, <code id=the-fieldset-element:dom-cva-reportvalidity-2><a href=form-control-infrastructure.html#dom-cva-reportvalidity>reportValidity()</a></code>, and <code id=the-fieldset-element:dom-cva-setcustomvalidity-2><a href=form-control-infrastructure.html#dom-cva-setcustomvalidity>setCustomValidity()</a></code> methods, are part of the
  <a id=the-fieldset-element:the-constraint-validation-api href=form-control-infrastructure.html#the-constraint-validation-api>constraint validation API</a>. The <code id=the-fieldset-element:dom-fae-form-2><a href=form-control-infrastructure.html#dom-fae-form>form</a></code> and <code id=the-fieldset-element:dom-fieldset-name><a href=#dom-fieldset-name>name</a></code> IDL attributes are part of the element's forms API.</p>

  

  <div class=example>

   <p>This example shows a <code id=the-fieldset-element:the-fieldset-element-10><a href=#the-fieldset-element>fieldset</a></code> element being used to group a set of related
   controls:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->Display<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>c</c-> <c- e>value</c-><c- o>=</c-><c- s>0</c-> <c- e>checked</c-><c- p>&gt;</c-> Black on White<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>c</c-> <c- e>value</c-><c- o>=</c-><c- s>1</c-><c- p>&gt;</c-> White on Black<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>g</c-><c- p>&gt;</c-> Use grayscale<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Enhance contrast <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>range</c-> <c- e>name</c-><c- o>=</c-><c- s>e</c-> <c- e>list</c-><c- o>=</c-><c- s>contrast</c-> <c- e>min</c-><c- o>=</c-><c- s>0</c-> <c- e>max</c-><c- o>=</c-><c- s>100</c-> <c- e>value</c-><c- o>=</c-><c- s>0</c-> <c- e>step</c-><c- o>=</c-><c- s>1</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>datalist</c-> <c- e>id</c-><c- o>=</c-><c- s>contrast</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>Normal</c-> <c- e>value</c-><c- o>=</c-><c- s>0</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>option</c-> <c- e>label</c-><c- o>=</c-><c- s>Maximum</c-> <c- e>value</c-><c- o>=</c-><c- s>100</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>datalist</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>The following snippet shows a fieldset with a checkbox in the legend that controls whether or
   not the fieldset is enabled. The contents of the fieldset consist of two required text controls
   and an optional year/month control.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;clubfields&quot;</c-> <c- e>disabled</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>club</c-> <c- e>onchange</c-><c- o>=</c-><c- s>&quot;form.clubfields.disabled = !checked&quot;</c-><c- p>&gt;</c->
  Use Club Card
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Name on card: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>clubname</c-> <c- e>required</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Card number: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>clubnum</c-> <c- e>required</c-> <c- e>pattern</c-><c- o>=</c-><c- s>&quot;[-0-9]+&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Expiry date: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>clubexp</c-> <c- e>type</c-><c- o>=</c-><c- s>month</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>You can also nest <code id=the-fieldset-element:the-fieldset-element-11><a href=#the-fieldset-element>fieldset</a></code> elements. Here is an example expanding on the previous
   one that does so:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;clubfields&quot;</c-> <c- e>disabled</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>club</c-> <c- e>onchange</c-><c- o>=</c-><c- s>&quot;form.clubfields.disabled = !checked&quot;</c-><c- p>&gt;</c->
  Use Club Card
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Name on card: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>clubname</c-> <c- e>required</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;numfields&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>checked</c-> <c- e>name</c-><c- o>=</c-><c- s>clubtype</c-> <c- e>onchange</c-><c- o>=</c-><c- s>&quot;form.numfields.disabled = !checked&quot;</c-><c- p>&gt;</c->
   My card has numbers on it
  <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Card number: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>clubnum</c-> <c- e>required</c-> <c- e>pattern</c-><c- o>=</c-><c- s>&quot;[-0-9]+&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;letfields&quot;</c-> <c- e>disabled</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>clubtype</c-> <c- e>onchange</c-><c- o>=</c-><c- s>&quot;form.letfields.disabled = !checked&quot;</c-><c- p>&gt;</c->
   My card has letters on it
  <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Card code: <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>clublet</c-> <c- e>required</c-> <c- e>pattern</c-><c- o>=</c-><c- s>&quot;[A-Za-z]+&quot;</c-><c- p>&gt;&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></code></pre>

   <p>In this example, if the outer "Use Club Card" checkbox is not checked, everything inside the
   outer <code id=the-fieldset-element:the-fieldset-element-12><a href=#the-fieldset-element>fieldset</a></code>, including the two radio buttons in the legends of the two nested
   <code id=the-fieldset-element:the-fieldset-element-13><a href=#the-fieldset-element>fieldset</a></code>s, will be disabled. However, if the checkbox is checked, then the radio
   buttons will both be enabled and will let you select which of the two inner
   <code id=the-fieldset-element:the-fieldset-element-14><a href=#the-fieldset-element>fieldset</a></code>s is to be enabled.</p>

  </div>

  <div class=example>

   <p>This example shows a grouping of controls where the <code id=the-fieldset-element:the-legend-element-6><a href=#the-legend-element>legend</a></code> element both labels
   the grouping, and the nested heading element surfaces the grouping in the document outline:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>h2</c-><c- p>&gt;</c->
  How can we best reach you?
 <c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>checked</c-> <c- e>name</c-><c- o>=</c-><c- s>contact_pref</c-><c- p>&gt;</c->
  Phone
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>contact_pref</c-><c- p>&gt;</c->
  Text
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>name</c-><c- o>=</c-><c- s>contact_pref</c-><c- p>&gt;</c->
  Email
 <c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c-></code></pre>

  </div>


  <h4 id=the-legend-element><span class=secno>4.10.16</span> The <dfn data-dfn-type=element><code>legend</code></dfn> element<a href=#the-legend-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend title="The <legend> HTML element represents a caption for the content of its parent <fieldset>.">Element/legend</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLLegendElement title="The HTMLLegendElement is an interface allowing to access properties of the <legend> elements. It inherits properties and methods from the HTMLElement interface.">HTMLLegendElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-legend-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-legend-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As the <a id=the-legend-element:first-child href=https://dom.spec.whatwg.org/#concept-tree-first-child data-x-internal=first-child>first child</a> of a <code id=the-legend-element:the-fieldset-element><a href=#the-fieldset-element>fieldset</a></code> element.<dd>As the <a id=the-legend-element:first-child-2 href=https://dom.spec.whatwg.org/#concept-tree-first-child data-x-internal=first-child>first child</a> of an <code id=the-legend-element:the-optgroup-element><a href=#the-optgroup-element>optgroup</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-legend-element:concept-element-content-model>Content model</a>:<dd>If the element is a child of an <code id=the-legend-element:the-optgroup-element-2><a href=#the-optgroup-element>optgroup</a></code> element: <a id=the-legend-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>,
   but there must be no <a id=the-legend-element:interactive-content-2 href=dom.html#interactive-content-2>interactive content</a> and no descendant with the <code id=the-legend-element:attr-tabindex><a href=interaction.html#attr-tabindex>tabindex</a></code> attribute.<dd>Otherwise: <a id=the-legend-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>Phrasing content</a>, optionally intermixed with <a id=the-legend-element:heading-content-2 href=dom.html#heading-content-2>heading
   content</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-legend-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-legend-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-legend-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-legend-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-legend>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-legend>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-legend-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmllegendelement' data-dfn-type='interface'><c- g>HTMLLegendElement</c-></dfn> : <a id='the-legend-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-legend-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-legend-element:htmlformelement' href='forms.html#htmlformelement'><c- n>HTMLFormElement</c-></a>? <a href='#dom-legend-form' id='the-legend-element:dom-legend-form'><c- g>form</c-></a>;

  // <a href='obsolete.html#HTMLLegendElement-partial'>also has obsolete members</a>
};</code></pre>
   </dl>

  <p>The <code id=the-legend-element:the-legend-element><a href=#the-legend-element>legend</a></code> element <a id=the-legend-element:represents href=dom.html#represents>represents</a> a caption for the rest of the contents
  of the <code id=the-legend-element:the-legend-element-2><a href=#the-legend-element>legend</a></code> element's parent <code id=the-legend-element:the-fieldset-element-2><a href=#the-fieldset-element>fieldset</a></code> element, if
  any. Otherwise, if the <code id=the-legend-element:the-legend-element-3><a href=#the-legend-element>legend</a></code> has a parent <code id=the-legend-element:the-optgroup-element-3><a href=#the-optgroup-element>optgroup</a></code> element, then
  the <code id=the-legend-element:the-legend-element-4><a href=#the-legend-element>legend</a></code> represents the <code id=the-legend-element:the-optgroup-element-4><a href=#the-optgroup-element>optgroup</a></code>'s label.</p>

  <dl class=domintro><dt><code><var>legend</var>.<a href=#dom-legend-form id=dom-legend-form-dev>form</a></code><dd><p>Returns the element's <code id=the-legend-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element, if any, or null otherwise.</dl>

  

  <p>The <dfn data-dfn-for=HTMLLegendElement id=dom-legend-form data-dfn-type=attribute><code>form</code></dfn> IDL
  attribute's behavior depends on whether the <code id=the-legend-element:the-legend-element-5><a href=#the-legend-element>legend</a></code> element is in a
  <code id=the-legend-element:the-fieldset-element-3><a href=#the-fieldset-element>fieldset</a></code> element or not. If the <code id=the-legend-element:the-legend-element-6><a href=#the-legend-element>legend</a></code> has a <code id=the-legend-element:the-fieldset-element-4><a href=#the-fieldset-element>fieldset</a></code>
  element as its parent, then the <code id=the-legend-element:dom-legend-form-2><a href=#dom-legend-form>form</a></code> IDL attribute must
  return the same value as the <code id=the-legend-element:dom-fae-form><a href=form-control-infrastructure.html#dom-fae-form>form</a></code> IDL attribute on that
  <code id=the-legend-element:the-fieldset-element-5><a href=#the-fieldset-element>fieldset</a></code> element. Otherwise, it must return null.</p>

  

  <h4 id=the-selectedcontent-element><span class=secno>4.10.17</span> The <dfn data-dfn-type=element><code>selectedcontent</code></dfn> element<a href=#the-selectedcontent-element class=self-link></a></h4>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-selectedcontent-element:concept-element-categories>Categories</a>:<dd><a id=the-selectedcontent-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-contexts id=the-selectedcontent-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As a descendant of a <code id=the-selectedcontent-element:the-button-element><a href=#the-button-element>button</a></code> element which is a child of a <code id=the-selectedcontent-element:the-select-element><a href=#the-select-element>select</a></code>
   element.<dt><a href=dom.html#concept-element-content-model id=the-selectedcontent-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-selectedcontent-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-selectedcontent-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-selectedcontent-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-selectedcontent-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-selectedcontent-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-selectedcontent>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-selectedcontent>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-selectedcontent-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlselectedcontentelement' data-dfn-type='interface'><c- g>HTMLSelectedContentElement</c-></dfn> : <a id='the-selectedcontent-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-selectedcontent-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();
};</code></pre>
   </dl>

  <p>The <code id=the-selectedcontent-element:the-selectedcontent-element><a href=#the-selectedcontent-element>selectedcontent</a></code> element reflects the contents of a <code id=the-selectedcontent-element:the-select-element-2><a href=#the-select-element>select</a></code>
  element's currently selected <code id=the-selectedcontent-element:the-option-element><a href=#the-option-element>option</a></code> element. <code id=the-selectedcontent-element:the-selectedcontent-element-2><a href=#the-selectedcontent-element>selectedcontent</a></code> elements
  can be used to declaratively show the selected <code id=the-selectedcontent-element:the-option-element-2><a href=#the-option-element>option</a></code> element's contents within the
  <code id=the-selectedcontent-element:the-select-element-3><a href=#the-select-element>select</a></code> element's first child <code id=the-selectedcontent-element:the-button-element-2><a href=#the-button-element>button</a></code> element.</p>

  <p class=note>The <code id=the-selectedcontent-element:the-option-element-3><a href=#the-option-element>option</a></code> element's <code id=the-selectedcontent-element:attr-option-label><a href=#attr-option-label>label</a></code>
  attribute can be used to render a visible label for the option, but the
  <code id=the-selectedcontent-element:the-selectedcontent-element-3><a href=#the-selectedcontent-element>selectedcontent</a></code> element will not reflect the content of the <code id=the-selectedcontent-element:attr-option-label-2><a href=#attr-option-label>label</a></code> attribute.</p>

  

  <p>Every <code id=the-selectedcontent-element:the-selectedcontent-element-4><a href=#the-selectedcontent-element>selectedcontent</a></code> element has a <dfn id=selectedcontent-disabled>disabled</dfn> state, which is a boolean, initially set to
  false.</p>

  <p>To <dfn id="update-a-select's-selectedcontent">update a <code>select</code>'s <code>selectedcontent</code></dfn> given a
  <code id=the-selectedcontent-element:the-select-element-4><a href=#the-select-element>select</a></code> element <var>select</var>:</p>

  <ol><li><p>Let <var>selectedcontent</var> be the result of <a href=#select-enabled-selectedcontent id=the-selectedcontent-element:select-enabled-selectedcontent>get a <code>select</code>'s enabled
   <code>selectedcontent</code></a> given <var>select</var>.<li><p>If <var>selectedcontent</var> is null, then return.<li><p>Let <var>option</var> be the first <code id=the-selectedcontent-element:the-option-element-4><a href=#the-option-element>option</a></code> in <var>select</var>'s <a href=#concept-select-option-list id=the-selectedcontent-element:concept-select-option-list>list of options</a> whose <a href=#concept-option-selectedness id=the-selectedcontent-element:concept-option-selectedness>selectedness</a> is true, if any such <code id=the-selectedcontent-element:the-option-element-5><a href=#the-option-element>option</a></code>
   exists, otherwise null.<li><p>If <var>option</var> is null, then run <a href=#clear-a-selectedcontent id=the-selectedcontent-element:clear-a-selectedcontent>clear a <code>selectedcontent</code></a>
   given <var>selectedcontent</var>.<li><p>Otherwise, run <a href=#clone-an-option-into-a-selectedcontent id=the-selectedcontent-element:clone-an-option-into-a-selectedcontent>clone an option into a <code>selectedcontent</code></a> given
   <var>option</var> and <var>selectedcontent</var>.</ol>

  <p>To <dfn id=select-enabled-selectedcontent>get a <code>select</code>'s enabled
  <code>selectedcontent</code></dfn> given a <code id=the-selectedcontent-element:the-select-element-5><a href=#the-select-element>select</a></code> element <var>select</var>:</p>

  <ol><li><p>If <var>select</var> has the <code id=the-selectedcontent-element:attr-select-multiple><a href=#attr-select-multiple>multiple</a></code>
   attribute, then return null.<li><p>Let <var>selectedcontent</var> be the first <code id=the-selectedcontent-element:the-selectedcontent-element-5><a href=#the-selectedcontent-element>selectedcontent</a></code> element
   <a id=the-selectedcontent-element:descendant href=https://dom.spec.whatwg.org/#concept-tree-descendant data-x-internal=descendant>descendant</a> of <var>select</var> in <a id=the-selectedcontent-element:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> if any such element
   exists; otherwise return null.<li><p>If <var>selectedcontent</var> is <a href=#selectedcontent-disabled id=the-selectedcontent-element:selectedcontent-disabled>disabled</a>,
   then return null.<li><p>Return <var>selectedcontent</var>.</ol>

  <p>To <dfn id=clone-an-option-into-a-selectedcontent>clone an <code>option</code> into a <code>selectedcontent</code></dfn>, given an
  <code id=the-selectedcontent-element:the-option-element-6><a href=#the-option-element>option</a></code> element <var>option</var> and a <code id=the-selectedcontent-element:the-selectedcontent-element-6><a href=#the-selectedcontent-element>selectedcontent</a></code> element
  <var>selectedcontent</var>:</p>

  <ol><li><p>Let <var>documentFragment</var> be a new <code id=the-selectedcontent-element:documentfragment><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code> whose <a id=the-selectedcontent-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
   document</a> is <var>option</var>'s <a id=the-selectedcontent-element:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li>
    <p>For each <var>child</var> of <var>option</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-child id=the-selectedcontent-element:concept-tree-child data-x-internal=concept-tree-child>children</a>:</p>

    <ol><li><p>Let <var>childClone</var> be the result of running <a href=https://dom.spec.whatwg.org/#concept-node-clone id=the-selectedcontent-element:concept-node-clone data-x-internal=concept-node-clone>clone</a> given <var>child</var> with <a href=https://dom.spec.whatwg.org/#clone-a-node-subtree id=the-selectedcontent-element:concept-node-clone-subtree data-x-internal=concept-node-clone-subtree>subtree</a> set to true.<li><p><a href=https://dom.spec.whatwg.org/#concept-node-append id=the-selectedcontent-element:concept-node-append data-x-internal=concept-node-append>Append</a> <var>childClone</var> to
     <var>documentFragment</var>.</ol>
   <li><p><a href=https://dom.spec.whatwg.org/#concept-node-replace-all id=the-selectedcontent-element:concept-node-replace-all data-x-internal=concept-node-replace-all>Replace all</a> with
   <var>documentFragment</var> within <var>selectedcontent</var>.</ol>

  <p>To <dfn id=clear-a-selectedcontent>clear a <code>selectedcontent</code></dfn> given a <code id=the-selectedcontent-element:the-selectedcontent-element-7><a href=#the-selectedcontent-element>selectedcontent</a></code> element
  <var>selectedcontent</var>:</p>

  <ol><li><p><a href=https://dom.spec.whatwg.org/#concept-node-replace-all id=the-selectedcontent-element:concept-node-replace-all-2 data-x-internal=concept-node-replace-all>Replace all</a> with null within
   <var>selectedcontent</var>.</ol>

  <p>To <dfn id="clear-a-select's-non-primary-selectedcontent-elements">clear a <code>select</code>'s non-primary <code>selectedcontent</code> elements</dfn>,
  given a <code id=the-selectedcontent-element:the-select-element-6><a href=#the-select-element>select</a></code> element <var>select</var>:</p>

  <ol><li><p>Let <var>passedFirstSelectedcontent</var> be false.<li>
    <p>For each <var>descendant</var> of <var>select</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-descendant id=the-selectedcontent-element:descendant-2 data-x-internal=descendant>descendants</a> in <a id=the-selectedcontent-element:tree-order-2 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a> that is a
    <code id=the-selectedcontent-element:the-selectedcontent-element-8><a href=#the-selectedcontent-element>selectedcontent</a></code> element:</p>

    <ol><li><p>If <var>passedFirstSelectedcontent</var> is false, then set
     <var>passedFirstSelectedcontent</var> to true.<li><p>Otherwise, run <a href=#clear-a-selectedcontent id=the-selectedcontent-element:clear-a-selectedcontent-2>clear a <code>selectedcontent</code></a> given
     <var>descendant</var>.</ol>
   </ol>

  <p>The <code id=the-selectedcontent-element:the-selectedcontent-element-9><a href=#the-selectedcontent-element>selectedcontent</a></code> <a id=the-selectedcontent-element:html-element-post-connection-steps href=infrastructure.html#html-element-post-connection-steps>HTML element post-connection steps</a>, given
  <var>selectedcontent</var>, are:</p>

  <ol><li><p>Let <var>nearestSelectAncestor</var> be null.<li><p>Let <var>ancestor</var> be <var>selectedcontent</var>'s <a id=the-selectedcontent-element:parent href=https://dom.spec.whatwg.org/#concept-tree-parent data-x-internal=parent>parent</a>.<li><p>Set <var>selectedcontent</var>'s <a href=#selectedcontent-disabled id=the-selectedcontent-element:selectedcontent-disabled-2>disabled</a>
   state to false.<li>
    <p>For each <var>ancestor</var> of <var>selectedcontent</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-ancestor id=the-selectedcontent-element:ancestor data-x-internal=ancestor>ancestors</a>, in reverse <a id=the-selectedcontent-element:tree-order-3 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

    <ol><li>
      <p>If <var>ancestor</var> is a <code id=the-selectedcontent-element:the-select-element-7><a href=#the-select-element>select</a></code> element:</p>

      <ol><li><p>If <var>nearestSelectAncestor</var> is null, then set <var>nearestSelectAncestor</var>
       to <var>select</var>.<li><p>Otherwise, set <var>selectedcontent</var>'s <a href=#selectedcontent-disabled id=the-selectedcontent-element:selectedcontent-disabled-3>disabled</a> state to true.</ol>
     <li><p>If <var>ancestor</var> is an <code id=the-selectedcontent-element:the-option-element-7><a href=#the-option-element>option</a></code> element or a
     <code id=the-selectedcontent-element:the-selectedcontent-element-10><a href=#the-selectedcontent-element>selectedcontent</a></code> element, then set <var>selectedcontent</var>'s <a href=#selectedcontent-disabled id=the-selectedcontent-element:selectedcontent-disabled-4>disabled</a> state to true.</ol>
   <li><p>If <var>nearestSelectAncestor</var> is null or <var>nearestSelectAncestor</var> has the
   <code id=the-selectedcontent-element:attr-select-multiple-2><a href=#attr-select-multiple>multiple</a></code> attribute, then return.<li><p>Run <a href="#update-a-select's-selectedcontent" id="the-selectedcontent-element:update-a-select's-selectedcontent">update a <code>select</code>'s <code>selectedcontent</code></a> given
   <var>nearestSelectAncestor</var>.<li><p>Run <a href="#clear-a-select's-non-primary-selectedcontent-elements" id="the-selectedcontent-element:clear-a-select's-non-primary-selectedcontent-elements">clear a <code>select</code>'s non-primary <code>selectedcontent</code>
   elements</a> given <var>nearestSelectAncestor</var>.</ol>

  <p>The <code id=the-selectedcontent-element:the-selectedcontent-element-11><a href=#the-selectedcontent-element>selectedcontent</a></code> <a id=the-selectedcontent-element:html-element-removing-steps href=infrastructure.html#html-element-removing-steps>HTML element removing steps</a>, given
  <var>selectedcontent</var> and <var>oldParent</var>, are:</p>

  <ol><li>
    <p>For each <var>ancestor</var> of <var>selectedcontent</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-ancestor id=the-selectedcontent-element:ancestor-2 data-x-internal=ancestor>ancestors</a>, in reverse <a id=the-selectedcontent-element:tree-order-4 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

    <ol><li><p>If <var>ancestor</var> is a <code id=the-selectedcontent-element:the-select-element-8><a href=#the-select-element>select</a></code> element, then return.</ol>
   <li>
    <p>For each <var>ancestor</var> of <var>oldParent</var>'s <a href=https://dom.spec.whatwg.org/#concept-tree-inclusive-ancestor id=the-selectedcontent-element:inclusive-ancestor data-x-internal=inclusive-ancestor>inclusive ancestors</a>, in reverse <a id=the-selectedcontent-element:tree-order-5 href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>:</p>

    <ol><li><p>If <var>ancestor</var> is a <code id=the-selectedcontent-element:the-select-element-9><a href=#the-select-element>select</a></code> element, then run <a href="#update-a-select's-selectedcontent" id="the-selectedcontent-element:update-a-select's-selectedcontent-2">update a
     <code>select</code>'s <code>selectedcontent</code></a> given <var>ancestor</var> and
     return.</ol>
   </ol>



  <nav><a href=input.html>← 4.10.5 The input element</a> — <a href=index.html>Table of Contents</a> — <a href=form-control-infrastructure.html>4.10.18 Form control infrastructure →</a></nav>
